Bài viết này phù hợp với tất cả mọi người, từ người mới bắt đầu đến những nhà phát triển web giàu kinh nghiệm nhất. Tôi đã thấy những Senior Web Developer với hàng thập kỷ kinh nghiệm bỏ qua font và không xử lý chúng đúng cách, vì vậy hãy đọc tiếp.

Sau khi đọc vài dòng dưới đây, bạn sẽ sử dụng đúng @font-face và CSS hoạt động chính xác trên tất cả các trình duyệt.

Trang web của bạn sẽ trông và hoạt động đúng như mong đợi trên tất cả các thiết bị.

Font face là gì?

Tôi giả định bạn đã biết điều này, nếu không bạn sẽ không đọc bài viết này.

Tuy nhiên để đầy đủ thông tin, @font-face cho phép nhúng các font cụ thể vào trang web mà không cần người dùng phải cài đặt chúng trên hệ thống.

Các loại font có sẵn là: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” và “.svg”.

  • .woff viết tắt của Web Open Font Format
  • .woff2 viết tắt của WOFF 2.0 - Web Open Font Format
  • .ttf, .otf viết tắt của TTF/OTF - TrueType và OpenType
  • .eot viết tắt của EOT - Embedded OpenType
  • .svg viết tắt của SVG fonts

Mỗi trình duyệt có sự hỗ trợ “riêng” cho các loại này (đáng tiếc), vì vậy bạn cần tính đến điều đó.

Nếu bạn muốn các trang của mình trông giống nhau trên tất cả thiết bị và trình duyệt, bạn cần tất cả các định dạng trên.

Cách sử dụng Font Face đúng cách?

Đây là phần khó khăn, bởi vì nếu bạn tìm trên Google, ngay cả những trang web hàng đầu cũng không cho bạn thấy thực tế khắc nghiệt.

Như đã đề cập ở trên, mỗi trình duyệt có sự hỗ trợ font riêng, và nếu bạn muốn font của mình hoạt động trên mọi trình duyệt, bạn phải tải các loại font cần thiết và điều chỉnh CSS cho phù hợp.

Ví dụ nếu chúng ta kiểm tra Mozilla , bạn sẽ thấy:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

Điều này có đủ không? Không, nó sẽ không hoạt động trên tất cả trình duyệt. Ví dụ điều này hoàn toàn không hoạt động trên Internet Explorer.

Bạn có thể kiểm tra https://caniuse.com/?search=woff2 và tự xem.

Một ví dụ khác, nếu chúng ta kiểm tra W3 Schools :

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

Điều này có đúng không? Vẫn không, nó không hỗ trợ tất cả trình duyệt.

Để hỗ trợ tất cả trình duyệt, các loại font tải và CSS của bạn nên trông như thế này:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

Chú ý các bình luận trên mỗi loại font, chúng tự giải thích. Điều này sẽ hỗ trợ tất cả trình duyệt và font của bạn sẽ hiển thị đúng.

Cách chuyển đổi và tạo các loại Font Face?

Nếu bạn đang phát triển trang web cho khách hàng, họ thường chỉ cung cấp một loại font. Đó có thể là định dạng .otf hoặc .ttf, điều này không đủ.

Bạn cần tất cả các định dạng cần thiết cho tất cả trình duyệt, vì vậy bạn sẽ cần chuyển đổi chúng sang các loại @font-face phù hợp.

May mắn cho chúng ta, có các công cụ trực tuyến làm điều này tự động và thậm chí tạo CSS đúng (chúng ta đã tiến hóa hay chưa).

Chuyển đổi font trả phí/tùy chỉnh

Tôi khuyên bạn sử dụng Transfonter , nhưng tất nhiên bạn có thể sử dụng bất kỳ công cụ nào bạn thích.

Công cụ trực tuyến miễn phí này sẽ chuyển đổi font và cung cấp cho bạn các loại font và CSS sẵn sàng sử dụng:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

Chuyển đổi font miễn phí/mã nguồn mở

Trong trường hợp khách hàng không cung cấp font trả phí mà thay vào đó là Google Font miễn phí, cũng có công cụ cho điều này: https://google-webfonts-helper.herokuapp.com/fonts .

Công cụ này cũng sẽ tạo các loại và CSS cần thiết để hiển thị font đúng trên tất cả trình duyệt.

Tôi khuyến nghị mạnh mẽ bạn kiểm tra các font kết quả trong các trình duyệt khác nhau.

Cách sử dụng Font Families đúng cách?

Tôi có thể chắc chắn rằng bạn chưa bao giờ sử dụng đặc tả font family một cách tối ưu. Tải đúng font face chưa đủ, bạn cũng cần chỉ định các font dự phòng.

Font dự phòng được sử dụng khi font hiện tại không khả dụng. Điều này có thể xảy ra vì nhiều lý do từ sự cố CDN đến timeout mạng.

Bạn sẽ nhận thấy hầu hết CMS đã định nghĩa font dự phòng như sau:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

Điều này có đủ không? Không. Đáng tiếc, font hệ thống không giống nhau trên mọi thiết bị. Windows có font riêng, Android có font riêng, iOS cũng vậy.

Vậy phải làm sao? Khai báo chúng đúng cách, xem cách Bootstrap làm:

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Sử dụng những điều trên với font tùy chỉnh, kết quả sẽ là:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Đó là cách gọn gàng để xử lý font dự phòng, đảm bảo trang web của bạn sẽ trông mượt mà trên tất cả thiết bị trong khi font đang tải (hoặc không tải được).

Kiểm thử Font Face và Font Family

Đừng sợ từ kiểm thử, đây là quy trình rất đơn giản nếu bạn làm việc thông minh. Bạn thậm chí không cần kiểm tra trang thủ công để xem font nào đã tải (nếu bạn lười).

Khi công nghệ phát triển, các công cụ dành cho nhà phát triển cũng phát triển theo; việc tạo mọi thứ ngày càng dễ dàng hơn.

Kiểm tra xem @font-face và font-family của bạn có tải đúng không là quy trình rất đơn giản, xem bên dưới.

Kiểm tra Font Face và Font Family

  1. Sử dụng tiện ích mở rộng trình duyệt để dễ dàng xem trang web của bạn đang sử dụng font nào:
  1. Chỉnh sửa trang và “phá vỡ” @font-face, mô phỏng trường hợp font tùy chỉnh không tải. Bạn có thể “phá vỡ” việc tải bằng cách thay đổi tên font hoặc URL dẫn đến font không tồn tại.
  2. Kết quả nên là font đầu tiên phù hợp với thiết bị của bạn làm dự phòng. Ví dụ trên thiết bị Apple, đây nên là “-apple-system”.

Mẹo và thủ thuật

  • Sử dụng thẻ HTML link header “preconnect” nếu bạn tải font từ CDN.
  • Trong mỗi khai báo font, thêm font-display: swap; để tăng tốc tải. Điều này hướng dẫn trình duyệt sử dụng font dự phòng để hiển thị văn bản cho đến khi font tùy chỉnh được tải xong hoàn toàn.
  • Chỉ tải các font thực sự cần thiết, tôi đã thấy người ta tải 7 loại font cùng một font nhưng chỉ sử dụng một loại.
  • Để cải thiện tốc độ trang, hãy tải trước font (đầu tiên hoặc cần thiết) bằng HTTP/2. Điều này sẽ tăng tốc đáng kể trang của bạn và khắc phục vấn đề Google PageSpeed “Ensure text remains visible during webfont load”.

Vậy đấy, tôi hy vọng bài viết này đã giúp ích cho bạn.