Giảm kích thước phông chữ trên web

Ilya Grigorik
Ilya Grigorik
X Trang chủ
Jeremy Wagner

Kiểu chữ là yếu tố cơ bản để thiết kế, xây dựng thương hiệu, dễ đọc và khả năng tiếp cận tốt. Phông chữ trên web hỗ trợ tất cả những tính năng trên và nhiều tính năng khác: văn bản có thể chọn, có thể tìm kiếm, có thể thu phóng và thân thiện với DPI cao, mang lại khả năng hiển thị văn bản nhất quán và sắc nét bất kể kích thước màn hình và độ phân giải. WebFonts rất quan trọng đối với thiết kế, trải nghiệm người dùng và hiệu suất tốt.

Tối ưu hoá phông chữ trên web là một phần quan trọng trong chiến lược hiệu suất tổng thể. Mỗi phông chữ là một tài nguyên bổ sung và một số phông chữ có thể chặn hiển thị văn bản, nhưng chỉ vì trang đang sử dụng WebFonts không có nghĩa là trang phải hiển thị chậm hơn. Ngược lại, phông chữ được tối ưu hoá, kết hợp với chiến lược rõ ràng về cách tải và áp dụng phông chữ trên trang, có thể giúp giảm tổng kích thước trang và cải thiện thời gian hiển thị trang.

Phân tích thành phần của phông chữ trên web

Phông chữ web là một bộ sưu tập các ký tự và mỗi ký tự là một hình vectơ mô tả một chữ cái hoặc biểu tượng. Kết quả là, hai biến đơn giản sẽ xác định kích thước của một tệp phông chữ cụ thể: độ phức tạp của đường dẫn vectơ của mỗi ký tự và số lượng ký tự trong một phông chữ cụ thể. Ví dụ: Open Sans, một trong những WebFonts phổ biến nhất, chứa 897 ký tự, bao gồm các ký tự Latinh, Hy Lạp và Chữ Kirin.

Bảng phông chữ

Khi chọn phông chữ, điều quan trọng là phải xem xét bộ ký tự nào được hỗ trợ. Nếu cần bản địa hoá nội dung trang sang nhiều ngôn ngữ, bạn nên sử dụng một phông chữ có thể mang lại giao diện và trải nghiệm nhất quán cho người dùng. Ví dụ: bộ phông chữ Noto của Google hướng đến việc hỗ trợ tất cả các ngôn ngữ trên thế giới. Tuy nhiên, lưu ý rằng tổng kích thước của Noto, bao gồm tất cả ngôn ngữ, sẽ dẫn đến tệp tải xuống ZIP hơn 1, 1 GB.

Trong bài đăng này, bạn sẽ tìm hiểu cách giảm kích thước tệp được phân phối của phông chữ trên web.

Định dạng phông chữ trên web

Hiện nay, có hai định dạng vùng chứa phông chữ được khuyên dùng trên web:

WOFF và WOFF 2.0 được hỗ trợ rộng rãi và được tất cả trình duyệt hiện đại hỗ trợ.

  • Phân phát biến thể WOFF 2.0 cho các trình duyệt hiện đại.
  • Nếu thực sự cần thiết, chẳng hạn như nếu bạn vẫn cần hỗ trợ Internet Explorer 11, hãy dùng WOFF làm phương án dự phòng.
  • Ngoài ra, hãy cân nhắc không sử dụng phông chữ web cho các trình duyệt cũ và quay lại sử dụng phông chữ hệ thống. Việc này cũng có thể hoạt động hiệu quả hơn đối với các thiết bị cũ và bị hạn chế.
  • Vì WOFF và WOFF 2.0 bao gồm tất cả các cơ sở cho các trình duyệt hiện đại và kế thừa vẫn đang được sử dụng, nên việc sử dụng EOT và TTF không còn cần thiết nữa và có thể dẫn đến thời gian tải phông chữ trên web lâu hơn.

Nén và phông chữ web

Cả WOFF và WOFF 2.0 đều được nén tích hợp sẵn. Tính năng nén nội bộ của WOFF 2.0 sử dụng Brotli, và cung cấp khả năng nén tốt hơn đến 30% so với WOFF. Để biết thêm thông tin, hãy xem báo cáo đánh giá WOFF 2.0.

Cuối cùng, bạn nên lưu ý rằng một số định dạng phông chữ chứa siêu dữ liệu bổ sung, chẳng hạn như thông tin gợi ý phông chữ và g chỉnh nét có thể không cần thiết trên một số nền tảng, giúp tối ưu hoá thêm kích thước tệp. Ví dụ: Google Fonts duy trì hơn 30 biến thể được tối ưu hoá cho mỗi phông chữ, đồng thời tự động phát hiện và phân phối biến thể tối ưu cho mỗi nền tảng và trình duyệt.

Xác định bộ phông chữ bằng @font-face

Quy tắc CSS @font-face cho phép bạn xác định vị trí của một tài nguyên phông chữ cụ thể, đặc điểm kiểu của phông chữ và điểm mã Unicode cần sử dụng. Bạn có thể sử dụng kết hợp các nội dung khai báo @font-face như vậy để tạo "bộ phông chữ" mà trình duyệt sẽ sử dụng để đánh giá tài nguyên phông chữ nào cần được tải xuống và áp dụng cho trang hiện tại.

Cân nhắc việc dùng phông chữ có thể thay đổi

Nhiều phông chữ có thể làm giảm đáng kể kích thước tệp của phông chữ trong trường hợp bạn cần nhiều biến thể của một phông chữ. Thay vì phải tải các kiểu chữ thông thường, kiểu in đậm cùng với các phiên bản in nghiêng của chúng, bạn có thể tải một tệp chứa tất cả thông tin. Tuy nhiên, các kích thước tệp phông chữ thay đổi sẽ lớn hơn một biến thể phông chữ riêng lẻ, mặc dù nhỏ hơn so với sự kết hợp của nhiều biến thể. Thay vì một phông chữ thay đổi lớn, bạn nên phân phát các biến thể phông chữ quan trọng trước rồi mới tải các biến thể khác xuống sau.

Hiện tại, tất cả trình duyệt hiện đại đều hỗ trợ nhiều phông chữ. Hãy tìm hiểu thêm trong bài viết Giới thiệu về phông chữ biến đổi trên web.

Chọn định dạng phù hợp

Mỗi phần khai báo @font-face cung cấp tên của bộ phông chữ, đóng vai trò là một nhóm logic gồm nhiều nội dung khai báo, các thuộc tính phông chữ như kiểu, độ đậm và độ giãn, và bộ mô tả src, chỉ định danh sách vị trí được ưu tiên cho tài nguyên phông chữ.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Trước tiên, hãy lưu ý rằng các ví dụ trên xác định một bộ Awesome Font với hai kiểu (bình thường và in nghiêng), mỗi kiểu trỏ đến một nhóm tài nguyên phông chữ khác nhau. Lần lượt, mỗi phần mô tả src chứa một danh sách biến thể tài nguyên được ưu tiên phân tách bằng dấu phẩy:

  • Lệnh local() cho phép bạn tham chiếu, tải và sử dụng phông chữ được cài đặt trên máy. Nếu người dùng đã cài đặt phông chữ trên hệ thống của họ, thì chế độ này sẽ bỏ qua mạng hoàn toàn và là nhanh nhất.
  • Lệnh url() cho phép bạn tải các phông chữ bên ngoài và được phép chứa một gợi ý format() không bắt buộc cho biết định dạng của phông chữ mà URL đã cung cấp tham chiếu.

Khi xác định rằng phông chữ là cần thiết, trình duyệt sẽ lặp lại danh sách tài nguyên được cung cấp theo thứ tự được chỉ định và cố gắng tải tài nguyên phù hợp. Ví dụ như làm theo ví dụ trên:

  1. Trình duyệt thực hiện bố cục trang và xác định những biến thể phông chữ cần thiết để hiển thị văn bản được chỉ định trên trang. Những phông chữ không thuộc Mô hình đối tượng CSS (CSSOM) của trang sẽ không được trình duyệt tải xuống vì không bắt buộc.
  2. Đối với mỗi phông chữ bắt buộc, trình duyệt sẽ kiểm tra xem phông chữ có sẵn trên máy hay không.
  3. Nếu phông chữ không có sẵn trên máy, trình duyệt sẽ lặp lại các định nghĩa bên ngoài:
    • Nếu có gợi ý định dạng, trình duyệt sẽ kiểm tra xem nó có hỗ trợ gợi ý hay không trước khi bắt đầu tải xuống. Nếu trình duyệt không hỗ trợ gợi ý, trình duyệt sẽ chuyển sang gợi ý tiếp theo.
    • Nếu không có gợi ý định dạng nào, trình duyệt sẽ tải tài nguyên xuống.

Sự kết hợp giữa lệnh cục bộ và lệnh bên ngoài với các gợi ý định dạng phù hợp cho phép bạn chỉ định tất cả định dạng phông chữ có sẵn và để trình duyệt xử lý phần còn lại. Trình duyệt xác định tài nguyên nào cần thiết và chọn định dạng tối ưu.

Chế độ cài đặt phụ trong dải ô Unicode

Ngoài các thuộc tính phông chữ như kiểu, độ đậm và độ kéo giãn, quy tắc @font-face còn cho phép bạn xác định một tập hợp các điểm mã Unicode mà mỗi tài nguyên hỗ trợ. Thao tác này cho phép bạn chia nhỏ phông chữ Unicode lớn thành các tập hợp con nhỏ hơn (ví dụ: tập hợp con chữ Latinh, chữ Kirin và tiếng Hy Lạp) và chỉ tải xuống các ký tự đại diện cần thiết để hiển thị văn bản trên một trang cụ thể.

Chỉ số mô tả unicode-range cho phép bạn chỉ định một danh sách các giá trị trong dải được phân tách bằng dấu phẩy, mỗi giá trị có thể ở một trong ba dạng sau:

  • Điểm mã đơn (ví dụ: U+416)
  • Phạm vi khoảng (ví dụ: U+400-4ff): cho biết điểm mã bắt đầu và kết thúc của một dải ô
  • Phạm vi ký tự đại diện (ví dụ: U+4??): ? ký tự cho biết bất kỳ chữ số thập lục phân nào

Ví dụ: bạn có thể chia bộ Awesome Font của mình thành các tập con theo tiếng Latinh và tiếng Nhật, mỗi tập hợp con mà trình duyệt sẽ tải xuống khi cần:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Nhờ sử dụng các tập hợp con phạm vi Unicode và các tệp riêng biệt cho mỗi biến thể kiểu cách của phông chữ, bạn có thể xác định một bộ phông chữ tổng hợp để tải xuống nhanh hơn và hiệu quả hơn. Khách truy cập chỉ tải các biến thể và tập hợp con họ cần xuống, và họ không buộc phải tải xuống các tập hợp con mà họ có thể không bao giờ nhìn thấy hoặc sử dụng trên trang.

Gần như mọi trình duyệt đều hỗ trợ unicode-range. Để tương thích với các trình duyệt cũ hơn, có thể bạn cần quay lại sử dụng "chế độ cài đặt phụ thủ công". Trong trường hợp này, bạn phải quay lại cung cấp một tài nguyên phông chữ duy nhất chứa tất cả các tập hợp con cần thiết và ẩn phần còn lại khỏi trình duyệt. Ví dụ: nếu trang chỉ sử dụng các ký tự La-tinh, thì bạn có thể bỏ các ký tự khác và phân phát tập hợp con đó dưới dạng tài nguyên độc lập.

  1. Xác định những tập hợp con cần thiết:
    • Nếu trình duyệt hỗ trợ chế độ cài đặt phụ dải ô Unicode thì trình duyệt sẽ tự động chọn tập hợp con phù hợp. Trang chỉ cần cung cấp các tệp tập hợp con và chỉ định dải ô unicode phù hợp trong quy tắc @font-face.
    • Nếu trình duyệt không hỗ trợ chế độ cài đặt phụ dải ô unicode, thì trang cần ẩn tất cả các tập hợp con không cần thiết; nghĩa là nhà phát triển phải chỉ định các tập hợp con bắt buộc.
  2. Tạo các tập hợp con phông chữ:
    • Sử dụng công cụ pyftsubset nguồn mở để tập hợp con và tối ưu hóa phông chữ của bạn.
    • Một số máy chủ phông chữ (chẳng hạn như Google Font) sẽ tự động tập hợp con theo mặc định.
    • Một số dịch vụ phông chữ cho phép cài đặt phụ theo cách thủ công thông qua các tham số truy vấn tuỳ chỉnh. Bạn có thể sử dụng các tham số này để chỉ định tập hợp con bắt buộc cho trang của mình theo cách thủ công. Tham khảo tài liệu của trình cung cấp phông chữ.

Lựa chọn và tổng hợp phông chữ

Mỗi bộ phông chữ có thể bao gồm nhiều biến thể kiểu cách (thông thường, in đậm, in nghiêng) và nhiều độ đậm cho từng kiểu. Mỗi thành phần trong số đó có thể chứa các hình dạng ký tự rất khác nhau, ví dụ: khoảng cách, kích thước khác nhau hoặc một hình dạng hoàn toàn khác nhau.

Độ đậm phông chữ

Sơ đồ trên minh hoạ một bộ phông chữ có ba độ đậm đậm khác nhau:

  • 400 (thông thường).
  • 700 (in đậm).
  • 900 (rất đậm).

Tất cả các biến thể khác ở giữa (chỉ báo bằng màu xám) sẽ được trình duyệt tự động ánh xạ tới biến thể gần nhất.

Khi một khuôn mặt được chỉ định mà không có khuôn mặt nào, thì khuôn mặt có trọng lượng ở gần sẽ được sử dụng. Nói chung, trọng lượng đậm ánh xạ với mặt có trọng lượng nặng hơn và trọng lượng nhẹ ánh xạ với mặt có trọng lượng nhẹ hơn.

Thuật toán so khớp phông chữ CSS

Logic tương tự cũng áp dụng cho các biến thể in nghiêng. Trình thiết kế phông chữ kiểm soát việc họ sẽ tạo biến thể nào và bạn kiểm soát biến thể nào sẽ sử dụng trên trang. Vì mỗi biến thể là một tệp tải xuống riêng biệt, bạn nên duy trì số lượng biến thể nhỏ. Ví dụ: bạn có thể xác định hai biến thể in đậm cho bộ Awesome Font:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Ví dụ trên khai báo bộ Awesome Font bao gồm 2 tài nguyên bao gồm cùng một bộ ký tự Latinh (U+000-5FF) nhưng có hai "trọng số" khác nhau: bình thường (400) và in đậm (700). Tuy nhiên, điều gì sẽ xảy ra nếu một trong các quy tắc CSS của bạn chỉ định độ đậm phông chữ khác hoặc đặt thuộc tính font-style thành italic?

  • Nếu không có phông chữ phù hợp chính xác, trình duyệt sẽ thay thế phông chữ phù hợp nhất.
  • Nếu không tìm thấy kết quả phù hợp về văn phong (ví dụ: không có biến thể in nghiêng nào được khai báo trong ví dụ trên), thì trình duyệt sẽ tổng hợp biến thể phông chữ của riêng mình.
Tổng hợp phông chữ

Ví dụ ở trên minh hoạ sự khác biệt giữa kết quả phông chữ thực tế và phông chữ tổng hợp của Open Sans. Tất cả các biến thể tổng hợp được tạo từ một phông chữ có trọng số 400. Như bạn có thể thấy, có sự khác biệt đáng chú ý trong kết quả. Chi tiết về cách tạo biến thể in đậm và xiên không được chỉ định. Do đó, kết quả sẽ khác nhau giữa các trình duyệt và phụ thuộc nhiều vào phông chữ.

Danh sách kiểm tra tối ưu hóa kích thước phông chữ web

  • Kiểm tra và giám sát việc sử dụng phông chữ: đừng sử dụng quá nhiều phông chữ trên các trang và đối với mỗi phông chữ, hãy giảm thiểu số lượng biến thể được sử dụng. Điều này giúp tạo ra trải nghiệm nhất quán và nhanh hơn cho người dùng.
  • Tránh các định dạng cũ nếu có thể: Định dạng EOT, TTF và WOFF lớn hơn WOFF 2.0. EOT và TTF là các định dạng hoàn toàn không cần thiết, trong đó WOFF có thể được chấp nhận nếu bạn cần hỗ trợ Internet Explorer 11. Nếu bạn chỉ nhắm mục tiêu đến các trình duyệt hiện đại, chỉ sử dụng WOFF 2.0 là lựa chọn đơn giản và hiệu quả nhất.
  • Phân nhóm tài nguyên phông chữ: nhiều phông chữ có thể được gộp lại hoặc chia thành nhiều dải unicode để cung cấp chỉ hình ảnh phông chữ mà trang cụ thể yêu cầu. Điều này làm giảm kích thước tệp và cải thiện tốc độ tải xuống của tài nguyên. Tuy nhiên, khi xác định các nhóm nhỏ, hãy cẩn thận tối ưu hoá để sử dụng lại phông chữ. Ví dụ: không tải xuống bộ ký tự khác nhau nhưng chồng chéo trên mỗi trang. Một phương pháp hay là tập hợp con dựa trên tập lệnh: ví dụ: chữ Latinh và chữ Kirin.
  • Ưu tiên cho local() trong danh sách src của bạn: Việc liệt kê local('Font Name') trước trong danh sách src sẽ đảm bảo rằng yêu cầu HTTP không được thực hiện cho các phông chữ đã cài đặt.
  • Sử dụng Lighthouse để thử nghiệm tính năng nén văn bản.

Ảnh hưởng đối với thời gian hiển thị nội dung lớn nhất (LCP) và điểm số tổng hợp về mức thay đổi bố cục (CLS)

Tuỳ thuộc vào nội dung trên trang của bạn, các nút văn bản có thể được xem là ứng viên cho Thời gian hiển thị nội dung lớn nhất (LCP). Do đó, điều quan trọng là bạn phải đảm bảo phông chữ của trang web nhỏ nhất có thể bằng cách làm theo lời khuyên trong bài viết này để người dùng thấy văn bản trên trang của bạn càng sớm càng tốt.

Nếu bạn lo ngại rằng mặc dù bạn đã nỗ lực tối ưu hoá, nhưng văn bản trên trang có thể mất quá nhiều thời gian để hiển thị do tài nguyên phông chữ trên web lớn, thì thuộc tính font-display có một số chế độ cài đặt có thể giúp bạn tránh văn bản ẩn trong khi phông chữ đang được tải xuống. Tuy nhiên, việc sử dụng giá trị swap có thể gây ra những thay đổi đáng kể về bố cục, ảnh hưởng đến Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang web. Hãy cân nhắc sử dụng các giá trị optional hoặc fallback nếu có thể.

Nếu phông chữ trên web quan trọng đối với thương hiệu của bạn — và theo tiện ích, trải nghiệm người dùng — hãy xem xét tải trước phông chữ để trình duyệt có thể yêu cầu chúng một cách thuận lợi. Điều này có thể làm giảm cả khoảng thời gian hoán đổi nếu bạn sử dụng font-display: swap hoặc cả khoảng thời gian chặn nếu bạn không sử dụng font-display.