Flash nội dung chưa được đặt trong IE với @ font-face

Question

Tôi đang làm việc trên một trang web sử dụng kiểu chữ Open Sans cho văn bản nội dung, với các tệp phông chữ EOT, SVG, WOFF và TTF và biểu định kiểu được tạo bởi Font Squirrel. Tôi đã bao gồm CSS phông chữ đầu tiên trong tiêu đề trang của mình. Nhưng khi tôi xem các trang web trong IE7, IE8 và thậm chí IE9 tôi nhận được một đèn flash của tất cả mọi thứ trong Times Roman trước khi Open Sans đá vào. Điều này không xảy ra trong các trình duyệt khác.

Có ai có thể đề xuất cách tôi có thể ngăn điều này xảy ra không? Đây là CSS Font Squirrel tôi đang sử dụng cho phông chữ đó:

@font-face { 
    font-family: 'OpenSansRegular'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

Những gì bạn thấy trong khi phông chữ tùy chỉnh đang được tải xuống không được xác định trong mã trên. Nó được xác định trong các hướng dẫn khác font-family trong suốt mã CSS của bạn.

Thêm phông chữ khác sau giá trị 'OpenSansRegular', được phân tách bằng dấu phẩy. Từ phải sang trái:

• ở bên phải, họ phông chữ của bạn. serif, sans-serif, monospace hoặc cursive (yay Comic Sans!). Tại đây, OpenSansSth là ... sans-serif.
  Trình duyệt của bạn có mặc định cho các gia đình này, Arial, Verdana hoặc một số phông chữ khác trong Linux, bất cứ điều gì. Đó là sự lựa chọn của người dùng khi bạn không chọn cho anh ta. Họ mặc định là serif và phông chữ mặc định trong Windows là 'Times New Roman'. Đó là lý do tại sao bạn thấy Times New Roman là một FOUC trong IE.
• thì phông chữ websafe càng gần với phông chữ tùy chỉnh của bạn càng tốt. Ở đây nó sẽ là một phông chữ sans-serif như Verdana hay Arial. Có thể sans-serif và Verdana sẽ giống nhau nhưng bạn không bao giờ chắc chắn (đặc biệt là với người dùng Linux), vì vậy hãy thêm cả
• Giữa phông chữ tùy chỉnh và phông chữ websafe, bạn có thể thêm phông chữ có thể được cài đặt trong một vài hệ điều hành nhưng không an toàn như các ứng dụng được cài đặt với MS Office, Adobe Reader, OS X, Adobe Creative Suite, v.v. Bạn sẽ tìm thấy chúng trong 10 đến 90% số máy tính khách truy cập của bạn, nhưng không phải 100%. Không phải mọi người đều cài đặt Creative Suite (chỉ chuyên gia web và các nhà thiết kế khác) và MS Office (tôi sử dụng LibreOffice) và có các phông chữ khác nhau được cài đặt trong XP, Vista và 7
• cuối cùng, giá trị ngoài cùng bên trái sẽ là tên tùy chỉnh mà bạn đã cung cấp cho phông chữ tùy chỉnh của bạn. OpenSansRegular trong trang web của bạn

Ex:

  nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif; 
     } 

bảng tương thích với tỷ lệ phần trăm (có thể là một chút cũ) http://www.codestyle.org/css/font-family/
Không sử dụng 10 giá trị, từ 3 đến 6 có lẽ sẽ đủ;) Năm 2012 @ font-face có thể gây ra vấn đề hiển thị tùy thuộc vào trình duyệt và hệ điều hành (bí danh) nhưng nó được hỗ trợ rất tốt để bạn có thể rút ngắn phông chữ-gia đình của bạn.

Answer 2

Plugin jQuery để ẩn FOUC trong số @font-face có thể tìm thấy tại đây: How to know if a font (@font-face) has already been loaded? Đã xóa khối mã khỏi chuỗi này vì tôi đã cập nhật nó trên đó.