Verwenden von .otf-Schriftarten in Webbrowsern

440

Ich arbeite an einer Website, für die Online-Testversionen erforderlich sind. Die Schriftarten, die ich habe, sind alle .otf

Gibt es eine Möglichkeit, die Schriftarten einzubetten und in allen Browsern zum Laufen zu bringen?

Wenn nicht, welche anderen Alternativen habe ich?

html css fonts font-face Naruto
quelle
1
Vielleicht sollte Javascript hier aus der Tag-Liste entfernt werden?
kzh

Antworten:

754

Sie können Ihre OTFSchriftart mit @ font-face wie folgt implementieren :

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Wenn Sie jedoch eine Vielzahl moderner Browser unterstützen möchten, würde ich Ihnen empfehlen, zu WOFFund TTFSchriftarten zu wechseln . WOFFDer Typ wird von jedem gängigen Desktop-Browser implementiert, während der TTFTyp ein Fallback für ältere Safari-, Android- und iOS-Browser ist. Wenn Ihre Schriftart eine kostenlose Schriftart ist, können Sie Ihre Schriftart beispielsweise mit einem Online- Schriftkonverter konvertieren .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Wenn Sie fast jeden Browser unterstützen möchten, der noch verfügbar ist (meiner Meinung nach nicht mehr erforderlich), sollten Sie einige weitere Schriftarten hinzufügen, wie:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Lesen Sie hier mehr darüber, warum all diese Typen implementiert sind und welche Hacks sie haben . Eine detaillierte Ansicht darüber, welche Dateitypen von welchen Browsern unterstützt werden, finden Sie unter:

@ font-face Browser-Unterstützung

EOT Browser Unterstützung

WOFF Browser Unterstützung

TTF-Browser-Unterstützung

Unterstützung für SVG-Fonts-Browser

hoffe das hilft

wählen
quelle
1
Es hat in fast allen Browsern einwandfrei funktioniert ... Der einzige Browser, der nicht funktioniert hat, ist FireFox Linux ... Irgendwelche Vorschläge für diesen?
Naruto
3
Beachten Sie, dass Sie, wenn Sie dies auf einem Windows-Server hosten, den .otf-Dateityp als gültigen und bereitgestellten Dateityp hinzufügen müssen. Der einzige Weg, um zu sehen, dass dies das Problem ist, besteht darin, dem Link zur Schriftart zu folgen (404-Fehler, wenn ja). Sie können zum Testen vorübergehend in .ttf oder sogar .html umbenennen. Die einzigen vom IE unterstützten Web-Schriftarten sind das WOFF-Format. (Nein, ich habe auch noch nie davon gehört!)
Henrik Erlandsson
Hey, wie wäre es mit der Leistung dieser Art von Schrift? Ist es gut? Oder andere ist besser?
Anggie Aziz
"Fehlen in den Codebeispielen Anführungszeichen ( )?
steffen
2
Scheint, als ob otf jetzt fast überall funktionieren sollte caniuse.com/#search=otf
Stephen
49

Beispiele aus dem Google Font Directory :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Dies funktioniert browserübergreifend mit .ttf, ich glaube, es kann mit .otf funktionieren. ( Wikipedia sagt, dass .otf meistens abwärtskompatibel mit .ttf ist.) Wenn nicht, können Sie die .otf in .ttf konvertieren

Hier sind einige gute Seiten:

kzh
quelle