Jeśli wiele źródeł znajduje się na liście @ font-face, czy wszystkie są załadowane po stronie klienta?

Question

szukam zoptymalizować szybkość moim miejscu i chcesz wiedzieć o Browers by załadować tylko plik czego potrzebują z poniższego kodu lub wszystkich plików czcionek:

@font-face { 
    font-family: 'Proxima Nova'; 
    src: url('proximanova-regitalic-webfont.eot'); 
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-regitalic-webfont.woff') format('woff'), 
     url('proximanova-regitalic-webfont.ttf') format('truetype'), 
     url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

Ponadto, jest to najbardziej optymalny sposób robić @ font-face? Czy istnieją inne strategie, które skracają czas ładowania dla użytkowników?

Answer 1

Typowa przeglądarka powinna próbować załadować czcionki z listy jeden po drugim, w zależności od obsługiwanego formatu, zaczynając od pierwszego na liście. Po uzyskaniu pliku czcionki, którego może użyć, nie próbuje załadować żadnej z pozostałych plików na liście. Jeśli przeglądarka nie obsługuje określonego formatu, powinna ona próbować załadować tę czcionkę; powinien przejść prosto do następnego źródła i spojrzeć na to.

Jest to podobne do tego, jak przeglądarka używa stosu czcionek we właściwości font-family.

Oczywiście nie wszystkie przeglądarki zachowują się zgodnie ze specyfikacją. Niektóre przeglądarki, takie jak IE, będą próbowały pobrać jak najwięcej czcionek lub przeanalizować regułę w nieoczekiwany sposób; zobacz komentarze, aby uzyskać więcej informacji i badań.

CSS został już zaprojektowany, aby zminimalizować czas ładowania i liczbę żądań za pomocą tego podejścia sekwencyjnego. Jeśli twoja czcionka zabiera zbyt dużo czasu z własnego serwera, zastanów się nad użyciem szybkiego CDN zamiast czcionek Google Web Czcionki, Typekit lub Adobe Edge.

Answer 2

Aby odpowiedzieć na to pytanie, mam cytowany odpowiednie fragmenty z poniższego W3C dokumentu:

CSS Fonts Module Level 3
W3C Kandydat zalecenie 3 października 2013

(w cytowanym materiale, trzeba pamiętać, że mam podkreślono te zdania, które są najbardziej istotne dla pytania.)

---

4.1 The @font-face rule

Reguła @font-face pozwala na łączenie do czcionek, które są automatycznie pobierane i aktywowane, gdy są potrzebne. Dzięki temu autorzy mogą wybrać czcionkę, która ściśle odpowiada celom projektowym dla danej strony , zamiast ograniczać wybór czcionki do zestawu dostępnych czcionek na danej platformie. Zestaw deskryptorów czcionek definiuje położenie zasobu czcionki, lokalnie lub zewnętrznie, wraz z charakterystyką indywidualnej powierzchni stylu. Do tworzenia rodzin czcionek o różnych twarzach można użyć wielu reguł: @font-face . Korzystając z reguł dopasowania czcionek CSS, agent użytkownika może selektywnie pobierać tylko te ściany, które są potrzebne dla danego fragmentu tekstu.

4.3 Font reference: the src descriptor

Ten deskryptor określa zasób zawierający dane czcionek.Wymagana jest dla reguły @font-face. Jego wartość to uporządkowana według priorytetu lista odniesień zewnętrznych lub lokalnie zainstalowanych nazw czcionek. Gdy potrzebna jest czcionka, agent użytkownika wykonuje iterację na zestawie wymienionych referencji, przy użyciu pierwszego z nich może zostać pomyślnie aktywowany. Czcionki zawierające nieprawidłowe dane lub lokalne twarze czcionek, które nie zostały znalezione, są ignorowane, a agent użytkownika ładuje następną czcionkę na liście.

...

odnośniki zewnętrzne składają się z adresem URL, a następnie opcjonalnie nutą opisującej format zasobu czcionki odwołuje tego adresu URL. Wskazówka w formacie zawiera rozdzieloną przecinkami listę ciągów formatów, które oznaczają dobrze znane formaty czcionek. Zgodne programy klienckie muszą pomijać pobieranie zasobu czcionek, jeśli wskazówki dotyczące formatów wskazują tylko nieobsługiwane lub nieznane formaty czcionek. Jeśli nie podano wskazówek dotyczących formatów, użytkownik powinien pobrać zasób czcionki.

 
    /* load WOFF font if possible, otherwise use OpenType font */ 
    @font-face { 
     font-family: bodytext; 
     src: url(ideal-sans-serif.woff) format("woff"), 
      url(basic-sans-serif.ttf) format("opentype"); 
    }