Jaki jest właściwy sposób użycia, @font-face
aby przeglądarka nie pobierała czcionki, jeśli użytkownik ją już posiada?
Używam @ font-face do zdefiniowania DejaVu, który jest już zainstalowany w moim systemie (linux). Firefox nie pobiera czcionki, ale Chromium pobiera ją za każdym razem!
Mój kod CSS oparty na wiewiórce czcionek i to pytanie wygląda następująco:
@font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-webfont.eot');
src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
font-weight: normal;
font-style: normal;
}
/* ... @font-face definitions for italic and bold omitted ... */
@font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-BoldItalic-webfont.eot');
src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
font-weight: bold;
font-style: italic;
}
Odpowiedzi:
Jeśli chcesz najpierw sprawdzić pliki lokalne:
@font-face { font-family: 'Green Sans Web'; src: local('Green Web'), local('GreenWeb-Regular'), url('GreenWeb.ttf'); }
Tutaj znajduje się bardziej szczegółowy opis tego, co należy zrobić .
źródło
src
s (jak w przykładzie OP)? Czy zakładamylocal
pierwszą czy drugą?Właściwie nic z
font-face
tym nie zrobiłem , więc potraktuj to z przymrużeniem oka, ale nie sądzę, aby przeglądarka miała sposób, aby ostatecznie stwierdzić, czy dana czcionka internetowa jest zainstalowana na komputerze użytkownika, czy nie.Użytkownik może na przykład mieć zainstalowaną na swoim komputerze inną czcionkę o tej samej nazwie. Jedynym sposobem ostatecznego ustalenia byłoby porównanie plików czcionek, aby sprawdzić, czy są identyczne. Przeglądarka nie mogłaby tego zrobić bez wcześniejszego pobrania czcionki internetowej.
Czy Firefox pobiera czcionkę, gdy faktycznie używasz jej w
font
deklaracji? (np.h1 { font: 'DejaVu Serif';
)?źródło
font
/font-family
pracuję. Po prostu najwyraźniej nie wiem, jak to@font-face
działa!