CSS @ font-face - co oznacza „src: local ('☺')”?

Używam @font-facepo raz pierwszy i pobrałem zestaw czcionek z fontsquirrel

Kod, który zalecają wstawić do mojego CSS to:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Teraz, ta uśmiechnięta buźka mnie zaskoczyła. Ale tak samo jest z liczbą adresów URL w src - dlaczego polecają tak wiele plików i czy wszystkie zostaną przesłane do przeglądarki podczas renderowania strony? Czy jest jakaś szkoda w usuwaniu wszystkich plików oprócz .ttf?

jeśli przeczytasz notatki w generatorze font-squirrel font-face, zobaczysz, że paul irlandzki miał na to ochotę.

Oto fragment jego wpisu na blogu :

I… odnośnie @font-face składnię

Teraz polecam kuloodporną odmianę buźki zamiast oryginalnej kuloodpornej składni.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Z kuloodpornego postu:

Tak, to uśmiechnięta buźka. Specyfikacja OpenType wskazuje, że żadne dwubajtowe znaki Unicode w ogóle nie będą działać w nazwie czcionki na komputerze Mac, co zmniejsza prawdopodobieństwo, że ktoś faktycznie wypuścił czcionkę o takiej nazwie.

Jest kilka powodów, dla których buźka jest lepszym rozwiązaniem:

• Oprogramowanie Webkit + do zarządzania czcionkami może zepsuć lokalne odniesienia, na przykład zamieniając glify w bloki A.

• W systemie OS X oprogramowanie do zarządzania czcionkami może zmienić ustawienia systemu, aby wyświetlić okno dialogowe podczas próby uzyskania dostępu do czcionki lokalnej (), która jest dostępna poza biblioteką / czcionkami. Więcej szczegółów na moim kuloodpornym poście. Font Explorer X jest również znany z tego, że psuje inne rzeczy w Firefoksie.

• Chociaż jest to mało prawdopodobne, możesz odwołać się do czcionki local (), która jest zupełnie inna niż myślisz, że jest. (Typofilski post z różnymi czcionkami, ta sama nazwa) Przynajmniej jest to ryzyko, a Ty przekazujesz kontrolę nad typem zarówno przeglądarce, jak i maszynie głównej. Ryzyko to może nie być warte korzyści wynikających z unikania pobierania czcionek.

Są to dość poważne problemy, ale warto je rozważyć.

Lokalny (☺︎) to hack CSS mający na celu przekierowanie IE6-8 do pobierania czcionek, których nie może używać (może używać tylko czcionek w formacie EOT).

Wyjaśnienie: ostatnia właściwość src ma pierwszeństwo w kaskadzie CSS, co oznacza, że ​​CSS będzie analizowany od dołu do góry. Lokalny (☺︎) spowoduje, że IE pominie src na dole, bez marnowania pasma pobierania czcionek, których nie może użyć, i raczej przejdzie bezpośrednio do czcionki w .eotformacie (zdefiniowanym w linii powyżej w twoim pytaniu), którego będzie używał. Uśmieszek ma na celu zapewnienie, że nie będzie lokalnej czcionki o tej nazwie (kombinacji znaków).

Przeczytaj więcej tutaj: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face Ostatnia właściwość src ma pierwszeństwo w kaskadzie CSS, co oznacza, że ​​CSS będzie analizowany od dołu do góry.