Khi nào tải phông chữ trên web và bạn có thể tải trước chúng không?

Question

Tôi đã nhận thấy khi sử dụng phông chữ web mà ban đầu họ có thể mất một giây để xuất hiện; giống như khi bạn tạo menu thả xuống, khi bạn di chuột qua trình đơn lần đầu tiên, toàn bộ menu sẽ xuất hiện dưới dạng màu nền trong một giây và sau đó văn bản sẽ xuất hiện.

Điều này không thực sự lý tưởng và điều này khiến tôi tin rằng các webfont không được tải xuống khi tệp CSS được tải, mà là khi bạn xem chúng lần đầu trên trang.

Nhưng mặt khác, tôi đã có các phông chữ được cài đặt trên máy tính của tôi để chúng không cần phải được tải xuống, do đó, cho vay câu hỏi về lý do tại sao họ làm điều này !?

Đây là CSS Tôi sử dụng để tải phông chữ web của tôi:

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Regular-webfont.eot'); 
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Regular-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Italic-webfont.eot'); 
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Italic-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Bold-webfont.eot'); 
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Bold-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Light-webfont.eot'); 
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Light-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Light-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg'); 
    font-weight: 300; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Medium-webfont.eot'); 
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Medium-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); 
    font-weight: 500; 
    font-style: normal; 
} 

Answer 1

Khi được phông chữ web tải?

Paul Irish thực hiện một trang đơn giản để kiểm tra điều này: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

Nó cho thấy rằng hầu hết các trình duyệt tải về phông chữ khi họ đang được sử dụng trong một trang chứ không phải là khi chúng được khai báo trong CSS. Tôi tin rằng IE là ngoại lệ nhưng tôi không có nó chạy để kiểm tra ngay bây giờ.

Lý do tải xuống khi sử dụng thay vì khai báo là giảm lưu lượng truy cập mạng không cần thiết, ví dụ: nếu một phông chữ được khai báo nhưng không được sử dụng.

Có thể tránh tải xuống phông chữ không?

Bạn nói đúng rằng nếu phông chữ đã được cài đặt, chúng không cần phải tải xuống. Như @Patrick đã nói ở trên, điều này có thể được thực hiện bằng cách sử dụng local(). Nó được đặt trước url() trong CSS và lấy tên của phông chữ (tên PostScript sau đó là cần thiết cho Safari trên Mac OS X). Hãy thử những thay đổi sau đây để CSS của bạn:

@font-face { 
    font-family: 'Roboto'; 
    src: url('../fonts/Roboto-Regular-webfont.eot'); 
    src: local(Roboto Regular), local(Roboto-Regular), 
     url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Roboto-Regular-webfont.woff') format('woff'), 
     url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), 
     url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Cuối cùng, để giảm thời gian download font chữ, bạn có thể chắc chắn rằng bạn đang làm như sau: CSS

• Đưa trước JavaScript
• Thêm xa -future Expires tiêu đề cho các phông chữ (do đó trình duyệt lưu trữ chúng)
• gzipping các phông chữ

Dưới đây là tóm tắt tốt về xử lý sự chậm trễ hiển thị phông chữ: http://paulirish.com/2009/fighting-the-font-face-fout/