2010-10-01 3 views
45

Was ist der richtige Weg, um @font-face zu verwenden, damit der Browser die Schriftart nicht herunterlädt, wenn der Benutzer sie bereits hat?@ font-face src: local - Wie benutzt man die lokale Schrift, wenn der Benutzer sie schon hat?

Ich benutze @ font-face, um DejaVu zu definieren, das bereits auf meinem System (Linux) installiert ist. Firefox lädt die Schrift nicht herunter, aber Chromium lädt sie jedes Mal herunter!

Mein CSS-Code, basierend auf font squirrel und that question sieht wie folgt aus:

@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; 
} 
+0

Related: http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean – dbarbosa

Antwort

60

Wenn Sie tun für lokale Dateien zu überprüfen, zuerst:

@font-face { 
font-family: 'Green Sans Web'; 
src: 
    local('Green Web'), 
    local('GreenWeb-Regular'), 
    url('GraublauWeb.ttf'); 
} 

Es gibt eine ausführlichere Beschreibung of what to do here.

+2

Was ist, wenn wir 2 'src's haben (wie im Beispiel von OP)? Setzen wir "lokal" auf den ersten oder zweiten? – mpen

-3

Ich habe eigentlich nichts getan mit font-face, so dass diese mit einer Prise Salz nehmen, aber ich glaube nicht, dass es Irgendeine Möglichkeit für den Browser, definitiv zu sagen, ob eine bestimmte Web-Schriftart auf dem Computer eines Benutzers installiert ist oder nicht.

Der Benutzer könnte beispielsweise eine andere Schriftart mit demselben Namen auf seinem Computer installiert haben. Die einzige Möglichkeit, dies definitiv zu sagen, wäre, die Font-Dateien zu vergleichen, um festzustellen, ob sie identisch sind. Und das könnte der Browser nicht tun, ohne zuerst die Webschrift herunterzuladen.

Lädt Firefox die Schriftart herunter, wenn Sie sie tatsächlich in einer font Deklaration verwenden? (z.B. h1 { font: 'DejaVu Serif';)?

+0

gut, Schriftnamen Problem ist von kurzer Wirkung hier denke ich (ich hatte nie irgendwelche Problem damit) – Thariama

+0

Ja ich schätze eine Kollision ist unwahrscheinlich. Fortfahren. –

+4

font/font-family in css macht keinen browser nichts herunterladen. Wenn es die Schriftart nicht lokal findet, wird sie ignoriert. Deshalb verwenden wir normalerweise einen Fontstack (eine Liste von Fonts) - wenn er nicht den ersten hat, versucht er den zweiten und so weiter. @ font-face ist etwas relativ "neues" (http://stackoverflow.com/questions/2219916/is-font-face-usable-now) – dbarbosa