Tài liệu này cung cấp một số thông tin kỹ thuật về những gì đang xảy ra các cảnh khi bạn yêu cầu phông chữ trên web bằng Google Fonts API.
Tài liệu này cũng cung cấp thông tin về hành vi của trình duyệt cụ thể.
Nếu bạn chỉ muốn sử dụng Fonts API (API Phông chữ), bạn không cần phải đọc trang này. Tuy nhiên, việc đọc trang này có thể giúp bạn cải thiện hiệu suất tải trang.
Tính năng phân phát của Google Fonts API (API Phông chữ của Google) là gì?
Khi trình duyệt gửi yêu cầu biểu định kiểu API Fonts (như được chỉ định trong
<link> trong trang web của bạn), Fonts API sẽ phân phát biểu định kiểu được tạo cho
tác nhân người dùng cụ thể đưa ra yêu cầu.
Ví dụ: yêu cầu đối với Inconsolata từ Firefox sẽ trả về CSS sau:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
Mặt khác, yêu cầu từ Internet Explorer sẽ trả về:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Sau khi tải CSS xuống, trình duyệt sẽ tải phông chữ xuống theo cho trình duyệt.
Hành vi dành riêng cho trình duyệt
Phần này mô tả hành vi mặc định của mỗi trình duyệt với phông chữ web. Lưu ý rằng bạn có thể kiểm soát những hành vi này bằng cách sử dụng Trình tải phông chữ web.
Để biết danh sách các trình duyệt được hỗ trợ, hãy xem Câu hỏi thường gặp.
Google Chrome
Chrome hiển thị phần còn lại của trang nhưng phông chữ sẽ hiển thị cho đến khi phông chữ được tải một khoảng trống thay cho văn bản sử dụng phông chữ.
Mozilla Firefox
Trước tiên, Firefox hiển thị văn bản bằng phông chữ mặc định, sau đó kết xuất lại văn bản theo phông chữ sau khi tải xong. Hành vi này được gọi là "nhấp nháy không được định kiểu văn bản".
Apple Safari
Safari hiển thị phần còn lại của trang nhưng phông chữ sẽ hiển thị cho đến khi phông chữ được tải một khoảng trống thay cho văn bản sử dụng phông chữ.
Microsoft Internet Explorer
Internet Explorer hiển thị phần còn lại của trang, nhưng cho đến khi phông chữ được tải, khung này sẽ hiển thị một khoảng trống thay cho văn bản dùng phông chữ.
Nói chung, hành vi của Internet Explorer có thể thay đổi tuỳ thuộc vào vị trí và sự tồn tại của nhiều yếu tố. Nếu bạn muốn cung cấp hành vi nhất quán trên tất cả các trình duyệt, hãy sử dụng Web Font Loader. Cho ví dụ: bạn có thể chọn làm cho tất cả các trình duyệt hoạt động như Firefox.