Trang này được dịch bởi Cloud Translation API.

Hướng dẫn nhanh về phông chữ web qua @font-face

Paul Irish

Giới thiệu

Trình xem trước phông chữ — Xem Công cụ xem trước phông chữ để biết phông chữ web linh hoạt như thế nào

Tính năng @font-face của CSS3 cho phép chúng tôi sử dụng kiểu chữ tuỳ chỉnh trên web theo cách dễ truy cập, thao tác và mở rộng. Tuy nhiên, bạn có thể nói: "Tại sao chúng ta sử dụng @font-face nếu có Cufon, sIFR và sử dụng văn bản trong hình ảnh?" Một số lợi ích của việc sử dụng @font-face cho phông chữ tuỳ chỉnh:

Toàn bộ khả năng tìm kiếm theo tính năng Tìm (ctrl-F)
Khả năng hỗ trợ tiếp cận đối với các công nghệ hỗ trợ như trình đọc màn hình
Văn bản có thể dịch được, thông qua dịch vụ dịch hoặc dịch trong trình duyệt
CSS có toàn quyền điều chỉnh chế độ hiển thị phông chữ: line-height, letter-spacing, text-shadow, text-align và các bộ chọn như ::first-letter và ::first-line

bản chất của @font-face

Về cơ bản, chúng ta sẽ khai báo phông chữ từ xa tuỳ chỉnh mới sẽ được sử dụng như sau:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Sau đó, hãy sử dụng:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Trong phần khai báo @font-face này, chúng ta dùng thuộc tính font-family để đặt tên rõ ràng cho phông chữ. Ngôn ngữ lập trình có thể là bất kỳ thứ gì, bất kể phông chữ được gọi là gì; font-family: 'SuperDuperComicSans'; sẽ vẫn hoạt động tốt, mặc dù có lẽ không phải vì danh tiếng của bạn. Trong thuộc tính src, chúng ta trỏ đến nơi trình duyệt có thể tìm thấy thành phần phông chữ. Tuỳ thuộc vào trình duyệt, một số loại phông chữ hợp lệ là eot, ttf, otf, svg hoặc một URI dữ liệu nhúng toàn bộ dữ liệu phông chữ cùng dòng.

	otf và ttf	svg	woff	eot
IE	IE9		IE9	IE5 trở lên
Firefox	FF3.5	FF3.5	FF3.6
Chrome	Chrome 4	Chrome 0.3	Chrome phiên bản 5
Safari	3.1	3.1
Opera	Opera 10.00	Opera 9
iOS		iOS 1
Android	2,2

Tất nhiên, không có gì đơn giản như vốn có. Hạn chế ban đầu của mã ở trên là nó không phân phối EOT đến IE 6-8. Cú pháp @font-face chống đầu dòng đề xuất một cách giải quyết vấn đề này; sau đó là một phiên bản mạnh mẽ.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('&#9786;'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Bạn thấy đau đầu? Nếu bạn muốn nhanh chóng triển khai việc này, hãy sử dụng trình tạo phông chữ Squirrel, một công cụ giúp đơn giản hóa toàn bộ quy trình cho bạn, lấy phông chữ và chuẩn bị các biến thể cũng như CSS cho bạn. Ngày nay, việc áp dụng phông chữ web vào thực tiễn là không thể thiếu.

Hỗ trợ trên thiết bị di động?

Mobile Safari hỗ trợ phông chữ web SVG kể từ iOS 3.1 và Android hỗ trợ otf/ttf kể từ phiên bản 2.2. Tuy nhiên, người dùng thiết bị di động của bạn có nên được hưởng trải nghiệm đánh máy nâng cao này không? Tôi khuyên bạn không nên. Nguyên nhân chủ yếu là do cách WebKit xử lý văn bản đang chờ phông chữ tuỳ chỉnh thông qua @font-face: văn bản không hiển thị. Vì vậy, trên kết nối di động băng thông thấp, người dùng của bạn sẽ không thấy văn bản nào cho đến khi khoảng 50 nghìn dữ liệu phông chữ được tải. Nhóm Webkit đang theo đuổi giải pháp bật phông chữ dự phòng sau khi vài giây hết hạn, nhưng cho đến khi giải pháp đó thành công, tôi sẽ không công bằng khi khiến người dùng gặp những rào cản như vậy giữa họ và nội dung của bạn.

Dịch vụ phông chữ web

Một số dịch vụ đưa tính năng @font-face vào một API dễ sử dụng, thường cho phép bạn thêm một CSS hoặc dòng tập lệnh vào HTML và một số cấu hình là bạn đã hoàn tất. Nhiều ứng dụng như WebInk, Typekit và Fontslive sẽ cho phép bạn sử dụng phông chữ (đôi khi lên đến giới hạn băng thông) với một khoản phí hằng tháng. Việc sử dụng các dịch vụ này rất thuận tiện cho nhà phát triển thông thường, khiến họ gặp phải một số yếu tố phức tạp khi phân phối giải pháp trên nhiều trình duyệt

Google Font API cho phép bạn sử dụng một tập hợp phông chữ được cấp phép miễn phí chọn lọc, chỉ bằng cách liên kết với một biểu định kiểu và cho phép Google xử lý các mối lo ngại về hiệu suất và trình duyệt. Đó là cách nhanh nhất để bắt đầu và chạy với phông chữ web.

Tìm kiểu chữ chuyên nghiệp cho @font-face

Các nhà thiết kế thường ngạc nhiên vì mua giấy phép phông chữ (ví dụ: để sử dụng trong thiết kế đồ hoạ) không có nghĩa là bạn có thể dùng giấy phép đó trong @font-face. Giấy phép cho @font-face (hoặc tính năng nhúng web) thường được bán riêng. Đọc kỹ thoả thuận và vui lòng liên hệ với nhà sản xuất phông chữ nếu bạn có câu hỏi. Fontspring là một cửa hàng phông chữ, bán hàng trăm phông chữ chuyên nghiệp chất lượng, tất cả đều được cấp phép để sử dụng với @font-face. FontFont và các nhà sản xuất khác, đã bắt đầu bán trực tiếp giấy phép @font-face, mặc dù hiện chỉ nhắm mục tiêu WOFF và EOT, những thứ bỏ ra một phần lớn (nhưng đang thu hẹp) của thị trường trình duyệt. Nhiều xưởng đúc đang thêm giấy phép phông chữ web vào danh mục của họ. Tuy nhiên, nếu bạn không thể tìm thấy giấy phép cho kiểu chữ đã chọn, hãy liên hệ với họ để hỏi về kiểu chữ đó.

Đối phó với FOUT

Đèn flash của văn bản chưa định kiểu là hiện tượng trong Firefox và Opera mà ít nhà thiết kế web ưa thích. Khi bạn áp dụng một kiểu chữ tuỳ chỉnh thông qua @font-face, sẽ có một khoảng thời gian ngắn trong quá trình tải trang, nơi phông chữ chưa được tải xuống và áp dụng, phông chữ tiếp theo trong ngăn xếp font-family sẽ được sử dụng. Việc này dẫn đến hiện tượng flash về phông chữ khác (thường kém đẹp hơn) trước khi được nâng cấp.

ALT_TEXT_HERE — Sự xuất hiện của văn bản chưa định kiểu xuất hiện trong bản trình bày HTML5.

Đi kèm với Google Font API là Trình tải WebFont, một thư viện javascript nhằm cung cấp một số hook sự kiện cho phép bạn kiểm soát việc tải nhiều hơn. Hãy xem cách bạn có thể làm cho các trình duyệt khác bắt chước hành vi ẩn văn bản dự phòng của WebKit trong khi tải phông chữ @font-face.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Nếu JavaScript bị vô hiệu hoá, văn bản sẽ vẫn hiển thị trong toàn bộ thời gian và nếu phông chữ bị lỗi bằng cách nào đó, nó sẽ quay trở lại một serif cơ bản một cách an toàn. Hiện tại, hãy xem đây là biện pháp thay thế; hầu hết các chuyên gia phông chữ web muốn ẩn văn bản dự phòng trong 2-5 giây, sau đó hiển thị văn bản dự phòng. Các thiết bị di động và băng thông thấp được hưởng lợi rất nhiều khi hết thời gian chờ này. Tất nhiên, Mozilla đang tìm cách khắc phục vấn đề này.

Một giải pháp nhẹ hơn nhưng kém hiệu quả hơn là thuộc tính font-size-adjust, hiện chỉ được hỗ trợ trong Firefox. Thao tác này giúp bạn có cơ hội chuẩn hoá x-height trên ngăn xếp phông chữ, giảm mức độ thay đổi có thể nhìn thấy trong FOUT. Trên thực tế, trình tạo Font Squirrel vừa thêm một tính năng cho biết tỷ lệ chiều cao x của phông chữ bạn tải lên, nhờ đó, bạn có thể đặt chính xác giá trị font-size-adjust.

Tóm tắt

Phông chữ web mang lại sự tự do cho nhà thiết kế. Với các tính năng sắp ra mắt như dấu gạch nối khác nhau và bố cục thay thế kiểu cách, chúng sẽ linh hoạt hơn rất nhiều. Hiện tại, bạn có thể tự tin triển khai phần này của CSS3 vì phần này bao gồm 98% trình duyệt được triển khai. Chúc bạn học vui!