Phông chữ của bên thứ ba

Đ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ụ dưới đây kết hợp 2 kỹ thuật hiệu suất để tải phông chữ của bên thứ ba nhanh nhất có thể: sử dụng phần khai báo phông chữ cùng dòng và sử dụng gợi ý về tài nguyên preconnect. Mặc dù đoạn mã này minh hoạ cách tải phông chữ từ Google Fonts, nhưng những kỹ thuật này cũng áp dụng cho các trình cung cấp phông chữ bên thứ ba khác.

  • Khai báo phông chữ cùng dòng: Đặt nội dung khai báo font-family 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ệp biểu định kiểu riêng được tải 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ữ.

  • Kết nối trước: Bạn nên sử dụng thẻ <link> kết hợp với các gợi ý về tài nguyên preconnect để tải Google Fonts. Gợi ý về tài nguyên preconnect giúp thiết lập mối kết nối sớm với nguồn gốc của bên thứ ba. Trong đoạn mã dưới đây, gợi ý tài nguyên đầu tiên thiết lập kết nối để tải biểu định kiểu phông chữ xuống; gợi ý tài nguyên thứ hai thiết lập kết nối để tải tệp phông chữ xuống.

Ví dụ:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>