Cách tải các tệp phông chữ tự lưu trữ nếu dịch vụ GoogleFont không khả dụng?

Question

Tôi muốn sử dụng bộ sưu tập phông chữ từ thư mục Google Fonts. Tôi đã chọn các kiểu và bao gồm thẻ CSS link trong mẫu của dự án của tôi.

Ngoài ra, với Google Fonts, bạn cũng có thể tải xuống bộ sưu tập và những gì bạn nhận được là tệp zip có tất cả kiểu phông chữ.

Tôi có thể tạo CSS tương đương với Google cung cấp cho tôi để bao gồm trong HTML, vì vậy tôi muốn cung cấp các tệp phông chữ tự lưu trữ làm dự phòng, nếu khách truy cập không thể truy cập API Google Font.

Làm cách nào để thiết lập điều này và ngăn không cho cả tệp phông chữ của Google và tệp phông chữ tự lưu trữ được tải xuống? Nếu người dùng có quyền truy cập vào Google Fonts, trình duyệt của bạn không nên tải xuống phiên bản tự lưu trữ của phông chữ.

Answer 1

Bạn có 3 lựa chọn:

1. Sử dụng 2 bộ @font-face tại-quy tắc, sử dụng khác nhau font-family tên (ví dụ "Droid Sans" và "Droid Sans Local"), và sau đó sử dụng một phông chữ chồng như "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. Tuy nhiên, điều này sẽ khiến cả hai phông chữ được tải xuống, tăng thời gian tải.
2. Sử dụng một bộ duy nhất @font-face tại quy tắc, nhưng sử dụng 2 bộ thuộc tính src. Điều này cũng có thể làm tăng thời gian tải nếu trình duyệt quyết định tải xuống tất cả các tệp phông chữ được chỉ định.
3. Thực hiện phản chiếu ở lớp mạng qua DNS, giống như hầu hết các CDN làm. Điều này yêu cầu thiết lập mạng, nhưng CSS của bạn sẽ không thay đổi và nó rõ ràng nhất trong suốt trình duyệt, không yêu cầu tải xuống thêm.

Phông chữ web của Google đã sử dụng tùy chọn thứ 3, vì vậy, cá nhân tôi sẽ không bận tâm nếu bạn đã sử dụng nguồn được lưu trữ trên CDN. Nhưng nó có thể đáng giá nếu bạn đang sử dụng phông chữ từ một nguồn ít đáng tin cậy hơn. Nhưng nếu bạn đang đi qua các nỗ lực để thiết lập này cho phông chữ của bạn, tại sao không thiết lập nó cho tất cả các tài nguyên tĩnh của bạn (hình ảnh, stylesheets, JS, vv)? Hành động hợp lý nhất là chỉ nhận CDN miễn phí hoặc trả phí để lưu trữ tất cả các tài sản tĩnh của bạn.

Answer 2

Tôi khuyên bạn chỉ nên tự lưu trữ chúng. Đây là cú pháp phông chữ "chống đạn" fontsprings'.

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Có tất cả bốn bộ này sẽ đảm bảo rằng nó hoạt động trên các trình duyệt. Chỉ cần đảm bảo có phông chữ của bạn trong tất cả bốn loại. Font Squirrel cũng có bộ dụng cụ tuyệt vời cho phông chữ.