Kiedy ładują się czcionki sieciowe i czy można je wstępnie załadować?

Question

Zauważyłem, że podczas korzystania z czcionek internetowych, na początku mogą one zająć sekundę; np. jeśli utworzysz rozwijane menu nawigacyjne, po najechaniu na menu po raz pierwszy całe menu pojawi się jako tylko kolor tła na sekundę, a następnie pojawi się tekst.

To naprawdę nie jest idealne i prowadzi mnie do przekonania, że ​​pliki webfont nie są pobierane po wczytaniu pliku CSS, ale raczej po pierwszym wyświetleniu ich na stronie.

Ale z drugiej strony, mam już zainstalowane czcionki na moim komputerze, więc nie powinny być one pobierane, więc daje to odpowiedź na pytanie, dlaczego to robią !?

Oto CSS używam załadować moje Czcionki Webfonts:

@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

Kiedy Czcionki Webfonts pobrać?

Paul Irish wykonane prostą stronę, aby przetestować to: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

pokazuje, że większość przeglądarek pobrać czcionki, gdy są one wykorzystywane na stronie raczej niż gdy są one zadeklarowane w CSS. Uważam, że IE jest wyjątkiem, ale nie mam go teraz do testowania.

Powodem pobrania na użycie, a nie na deklaracji, jest zmniejszenie niepotrzebnego ruchu w sieci, np. jeśli czcionka jest zadeklarowana, ale nie jest używana.

Czy można uniknąć pobierania czcionki?

Masz rację, że jeśli czcionki są już zainstalowane, nie trzeba ich pobierać. Jak wyżej wspomniano @Patrick, można to zrobić za pomocą local(). Jest umieszczony przed url() w CSS i przyjmuje nazwę czcionki (późniejsza nazwa PostScript jest wymagana w Safari na Mac OS X). Wypróbuj następujące zmiany do swojego CSS:

@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; 
} 

Wreszcie, aby zmniejszyć czas pobierania czcionek, można upewnić się, że robisz następujące: CSS

• Putting przed JavaScript
• Dodawanie daleko -future Expires nagłówki czcionek (tak przeglądarka buforuje je)
• GZipping czcionek

Oto dobre podsumowanie opóźnień wyświetlania czcionek: http://paulirish.com/2009/fighting-the-font-face-fout/