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

133

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?

stephenmurdoch
źródło

Odpowiedzi:

94

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ć.

skorodowane
źródło
12
wielkie dzięki ☺ jest już jasne - właśnie znalazłem ten artykuł na nicewebtype.com, który odpowiada również na wszystkie moje inne pytania
stephenmurdoch
9
więc w istocie lokalna część tego kodu mówi „ta czcionka jest lokalnie znana jako X” i używamy buźki, aby zapobiec ewentualnemu użyciu przez przeglądarkę niewłaściwej czcionki o tej samej nazwie (z powodów wymienionych powyżej). fajnie :)
abelito
3
Czy naprawdę potrzebujesz local()oświadczenia? Czy to jest zbędne? Czy przeglądarka nie powinna używać Twojej pierwszej url()bez niej?
Simon East,
Kiedy przeglądam moje źródło CSS w narzędziach Chrome dla programistów, pojawia się uśmiechnięta buźka: ☺ Czy to prawda?
Anthony
1
@Simon: Lokalne oświadczenie obsługuje IE6 - 8 (zobacz link na blogu), więc jeśli nie dbasz o te przeglądarki, jest to potrzebne.
Stijn de Witt
34

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/

Magne
źródło
-3

@ 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.

logu
źródło