@ font-face src: local - Wie verwende ich die lokale Schriftart, wenn der Benutzer sie bereits hat?


80

Was ist der richtige Weg, @font-facedamit der Browser die Schriftart nicht herunterlädt, wenn der Benutzer sie bereits hat?

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

Mein CSS-Code, basierend auf Font Squirrel und dieser Frage, sieht folgendermaßen 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;
}

Antworten:


102

Wenn Sie zuerst nach lokalen Dateien suchen möchten, gehen Sie wie folgt vor:

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

Es gibt eine ausführlichere Beschreibung dessen, was hier zu tun ist .


3
Was ist, wenn wir 2 srcs haben (wie im Beispiel von OP)? Ziehen wir localden ersten oder zweiten an?
Mpen

-7

Ich habe eigentlich nichts damit gemacht font-face, also nimm das mit einer Prise Salz, aber ich glaube nicht, dass der Browser definitiv feststellen kann, ob eine bestimmte Webschrift 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 festzustellen, besteht darin, die Schriftdateien zu vergleichen, um festzustellen, ob sie identisch sind. Und der Browser könnte das nicht tun, ohne zuerst Ihre Webschrift herunterzuladen.

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



Ja, ich denke eine Kollision ist unwahrscheinlich. Fortfahren.
Paul D. Waite

5
font / font-family in css lässt einen Browser nichts herunterladen. Wenn die Schriftart lokal nicht gefunden wird, wird sie ignoriert. Aus diesem Grund verwenden wir normalerweise einen Schriftstapel (eine Liste von Schriftarten). Wenn der erste nicht vorhanden ist, wird der zweite versucht und so weiter. @ font-face ist etwas relativ "Neues" ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa

@dbarbosa: Ich weiß wie font/ font-familyarbeiten. Ich weiß einfach nicht, wie das @font-facefunktioniert!
Paul D. Waite
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.