Khái niệm cơ bản về Google Font API - Thủ thuật CSS

Liên kết đến các tệp CSS

Về cơ bản, bạn liên kết trực tiếp đến các tệp CSS trên Google.com. Thông qua các tham số URL, bạn xác định cụ thể phông chữ nào bạn muốn và những biến thể của những phông chữ đó.

… 

Ý tưởng: Bạn có thể tránh yêu cầu mạng bổ sung bằng cách mở biểu định kiểu đó và sao chép và dán nội dung @ font-face vào biểu định kiểu chính của mình. Nhưng hãy cẩn thận: Google thực hiện một số Tác nhân người dùng đánh hơi nội dung để đôi khi cung cấp những thứ khác nhau cho các thiết bị khác nhau khi cần thiết. Bạn sẽ không được lợi gì nếu làm theo cách này.

CSS

Trong CSS của bạn, sau đó, bạn có thể chỉ định các phông chữ mới này theo tên trên bất kỳ phần tử nào bạn muốn sử dụng chúng.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Bạn có thể sử dụng JavaScript FontLoader thay vì liên kết với CSS. Nó có những ưu điểm, chẳng hạn như kiểm soát Flash của Văn bản chưa được định dạng (FOUT), và cũng có những nhược điểm, như thực tế là các phông chữ sẽ không tải đối với người dùng khi tắt JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Các tên lớp đó, ví dụ: .wf-loadingđược áp dụng cho phần tử. Vì vậy, hãy chú ý khi phông chữ đang “tải”, bạn có thể sử dụng tên lớp đó để ẩn văn bản. Sau đó, khi chúng được hiển thị, hãy hiển thị lại chúng. Đó là cách FOUT được kiểm soát.