Bao gồm liên kết hoặc nhập Google Web Fonts?

188

Cách ưa thích để bao gồm Google Web Fonts vào một trang là gì?

qua thẻ liên kết?

<link href = 'http: //fonts.googleapis.com/css? Family = Judson: 400,400italic, 700' rel = 'styleheet' type = 'text / css'>

thông qua nhập khẩu trong một bản định kiểu?

@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

hoặc sử dụng trình tải phông chữ web

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— kajo
nguồn

Bạn cũng có thể muốn đọc câu hỏi này trước khi sử dụng phông chữ google. tùy thuộc vào dự án cụ thể - nó có thể không phải luôn luôn là lựa chọn thông minh.

— Obmerk Kronen

Câu trả lời:

283

Đối với 90% + các trường hợp bạn có thể muốn <link>thẻ. Theo nguyên tắc thông thường, bạn muốn tránh @importcác quy tắc vì chúng trì hoãn việc tải tài nguyên được bao gồm cho đến khi tệp được tải xuống .. và nếu bạn có một quy trình xây dựng "làm phẳng" @ import, thì bạn sẽ tạo một vấn đề khác với phông chữ web : các nhà cung cấp động như Google WebFonts cung cấp các phiên bản phông chữ dành riêng cho nền tảng, vì vậy nếu bạn chỉ đơn giản nội dung nội dung, thì bạn sẽ kết thúc với các phông chữ bị hỏng trên một số nền tảng.

Bây giờ, tại sao bạn sẽ sử dụng trình tải phông chữ web? Nếu bạn cần kiểm soát hoàn toàn về cách các phông chữ được tải. Hầu hết các trình duyệt sẽ trì hoãn việc vẽ nội dung lên màn hình cho đến khi tất cả CSS được tải xuống và áp dụng - điều này tránh được vấn đề "flash của nội dung không được lọc". Nhược điểm là .. bạn có thể có thêm tạm dừng và trì hoãn cho đến khi nội dung được hiển thị. Với trình tải JS, bạn có thể xác định cách thức và thời điểm các phông chữ hiển thị .. ví dụ, bạn thậm chí có thể làm mờ chúng sau khi nội dung gốc được vẽ trên màn hình.

Một lần nữa, trường hợp 90% là <link>thẻ: sử dụng CDN tốt và các phông chữ sẽ giảm xuống nhanh chóng và thậm chí nhiều khả năng hơn, được cung cấp ra khỏi bộ đệm.

Để biết thêm thông tin và xem xét sâu về Google Web Fonts, hãy xem video GDL này

— igrigorik
nguồn

"bởi vì họ trì hoãn việc tải tài nguyên được bao gồm cho đến khi tệp được tải xuống" - đó không phải là lý do chính đáng để sử dụng @import? Bởi vì thông thường bạn không muốn xem nội dung cho đến khi phông chữ được tải (để tránh phông chữ bị nhấp nháy)

— Alex

API Phông chữ Web rất hữu ích khi làm việc với HTML5 Canvas. Bạn không thể sử dụng phông chữ chưa tải xong trước khi vẽ văn bản với nó và dĩ nhiên một khi phông chữ được tải, nó không được cập nhật tự động. Liên quan, API là cần thiết để theo dõi tiến trình tải tài sản, ví dụ như trong trò chơi.

— rvighne

Thông tin này phải có trên trang Google Web Fonts. Nó chỉ đưa ra ba tùy chọn cho bạn - và không đưa ra bất kỳ gợi ý hữu ích nào về việc nên sử dụng cái nào và khi nào.

— Gal

Hướng dẫn ' Bắt đầu ' của riêng Google chỉ sử dụng <link>phương pháp này, vì vậy tôi đoán đó là cách họ đề xuất theo cách không nói ra

— James Cushing

Bạn cũng có thể muốn thêm rel="preload"vào <link>thẻ, vì sau đó phông chữ sẽ được tải trước khi văn bản xuất hiện. Xem 3perf.com/blog/link- tội

— Elijah Mock

Nếu bạn lo lắng về SEO (Tối ưu hóa công cụ tìm kiếm) và hiệu suất, tốt nhất là sử dụng <link>thẻ vì nó có thể tải trước phông chữ.

Thí dụ:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Để biết thêm thông tin, hãy đọc bài này: https://ashton.codes/preload-google-fonts-USE-resource-hints/

— tôm hùm
nguồn

Sử dụng <link>Google do Google cung cấp vì có phiên bản trên phông chữ, nhưng ngay phía trên nó sử dụng tính năng kết nối trước của HTML5 để yêu cầu các trình duyệt mở kết nối TCP và đàm phán SSL trước với Font.gstatic.com. Đây là một ví dụ, rõ ràng cần phải nằm trong <head></head>thẻ của bạn :

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— Mark Cilia Vincenti
nguồn

Có đúng là kết nối trước là một miền hoàn toàn khác với liên kết biểu định kiểu trong ví dụ của bạn không? fonts.gstatic.comso vớifonts.googleapis.com

— BadHorsie

@BadHorsie đó là toàn bộ quan điểm của nó. Biểu định kiểu trên phông chữ.googleapis.com có liên kết đến tài nguyên trên phông chữ.gstatic.com. Bạn đang bảo trình duyệt khởi tạo kết nối đến máy chủ sau để nó sẽ kết nối hoặc bắt đầu kết nối vào thời điểm nó tìm thấy liên kết trong biểu định kiểu.

— Mark Cilia Vincenti