Używam @font-face
po 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?
local()
oświadczenia? Czy to jest zbędne? Czy przeglądarka nie powinna używać Twojej pierwszejurl()
bez niej?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
.eot
formacie (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/
źródło
@ 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.
źródło