Phông chữ tự lưu trữ

Phông chữ tự lưu trữ là các tệp phông chữ được phân phát từ máy chủ của riêng bạn – thay vì các tệp phông chữ của nhà cung cấp phông chữ bên thứ ba (ví dụ: Google Fonts).

Điều cực kỳ quan trọng là phải phân phối phông chữ nhanh chóng: việc phân phối phông chữ nhanh hơn không chỉ có nghĩa là văn bản sẽ hiển thị cho người dùng sớm hơn – mà còn có tác động lớn đến việc phông chữ có gây ra sự thay đổi bố cục hay không. Nếu không thể phân phối phông chữ trước khi cần, thì bố cục thường sẽ thay đổi khi phông chữ được hoán đổi. Kích thước của sự thay đổi bố cục này có thể thay đổi tuỳ thuộc vào mức độ phù hợp giữa phông chữ dự phòng với phông chữ trên web. Để xem hiện tượng này trong thực tế, hãy xem bản minh hoạ và so sánh sự thay đổi bố cục xảy ra trên kết nối nhanh với kết nối chậm.

Ví dụ bên dưới kết hợp 2 kỹ thuật hiệu suất để phân phối phông chữ tự lưu trữ nhanh nhất có thể: sử dụng nội dung khai báo phông chữ cùng dòng và sử dụng định dạng phông chữ WOFF2.

  • Khai báo phông chữ cùng dòng: Nội dung khai báo @font-face và font-family cùng dòng trong tài liệu chính, thay vì đưa thông tin này vào trong một biểu định kiểu bên ngoài, cho phép trình duyệt xác định tệp phông chữ nào sẽ được sử dụng trên trang mà không phải đợi tải tệp biểu định kiểu riêng xuống. Điều này rất quan trọng vì thường thì các trình duyệt sẽ không tải các tệp phông chữ xuống cho đến khi biết rằng các tệp đó được sử dụng trên trang. Trong hầu hết trường hợp, các nội dung khai báo phông chữ cùng dòng nên sử dụng preload để tải phông chữ.

  • WOFF2: Trong số các phông chữ hiện đại, WOFF2 là phông chữ mới nhất, có hỗ trợ trình duyệt rộng nhất và có khả năng nén tốt nhất. Vì sử dụng Brotli nên WOFF2 nén tốt hơn 30% so với WOFF.

Để cải thiện hiệu suất hơn nữa, hãy cân nhắc sử dụng chế độ cài đặt phụ phông chữ. Cài đặt phụ phông chữ là phương pháp chia một tệp phông chữ thành các tập hợp con nhỏ hơn, thường nhằm mục đích xoá các ký tự không dùng đến. Điều này có thể làm giảm đáng kể kích thước tệp của phông chữ. Các công cụ để tạo các tập hợp con phông chữ bao gồm fontkit, subfont và glyphhanger.

Để biết thêm thông tin về các phương pháp hay nhất đối với phông chữ tự lưu trữ, hãy xem phần Sử dụng phông chữ tự lưu trữ.

Ví dụ:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>