@ font-face src: local - Jak używać lokalnej czcionki, jeśli użytkownik ją już posiada?

83

Jaki jest właściwy sposób użycia, @font-faceaby 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;
}
dbarbosa
źródło

Odpowiedzi:

104

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

Thariama
źródło
3
A co jeśli mamy 2 srcs (jak w przykładzie OP)? Czy zakładamy localpierwszą czy drugą?
mpen
-7

Właściwie nic z font-facetym 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 fontdeklaracji? (np. h1 { font: 'DejaVu Serif';)?

Paul D. Waite
źródło
cóż, kwestia nazw czcionek ma tutaj niewielki wpływ (nigdy nie miałem z tym problemu)
Thariama
Tak, myślę, że kolizja jest mało prawdopodobna. Kontynuować.
Paul D. Waite
5
font / font-family w css nie powoduje, że przeglądarka nic pobiera. Jeśli nie znajdzie czcionki lokalnie, zignoruje ją. Dlatego zwykle używamy stosu czcionek (listy czcionek) - jeśli nie ma pierwszej, próbuje drugiej i tak dalej. @ font-face to coś stosunkowo „nowego” ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa
@dbarbosa: Wiem, jak font/ font-familypracuję. Po prostu najwyraźniej nie wiem, jak to @font-facedziała!
Paul D. Waite