Ich bin auf einer Website arbeiten, die Online-Schrift Studien erfordert, sind die Schriften Ich habe alle OTFMit Type-Schriften auf Web-Browsern
Gibt es eine Möglichkeit die Schriftarten einbetten und sie arbeiten auf allen Browsern ?
Wenn nicht, welche anderen Alternativen habe ich?
Sie können Ihre OTF Schrift mit @ font-face wie 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");
}
Allerdings, wenn Sie eine Vielzahl von modernen Browsern unterstützt werden soll, würde ich Ihnen empfehlen WOFF und TTF Schriftarten zu wechseln . WOFF Typ wird von jedem großen Desktop-Browser implementiert, während der Typ TTF ein Ersatz für ältere Safari, Android und iOS-Browser ist. Wenn Ihre Schriftart eine freie Schriftart ist, können Sie Ihre Schriftart konvertieren, indem Sie beispielsweise eine onlinefontconverter verwenden.
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Wenn Sie Unterstützung wollen fast jeden Browser, der es noch aus (nicht mehr notwendig IMHO), sollten Sie einige weitere Schrifttypen wie hinzufügen:
@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 */
}
können Sie mehr lesen darüber, warum all diese Typen implementiert sind und ihre Hacks here. Um eine detaillierte Ansicht, welche Datei-Typen unterstützt werden, von welchen Browsern finden Sie unter:
hoffe, das hilft
Ah, du hast mich dazu geschlagen! – kzh
Es funktionierte perfekt auf fast allen Browsern ... Der einzige Browser, der nicht funktionierte, ist FireFox Linux ... Irgendwelche Vorschläge für diese? – Naruto
Beachten Sie, dass Sie den .otf-Dateityp als gültigen und bereitgestellten Dateityp hinzufügen müssen, wenn Sie dies auf einem Windows-Server hosten. Die einzige Möglichkeit zu erkennen, dass dies das Problem ist, besteht darin, der Verknüpfung zur Schriftart zu folgen (falls dies der Fall ist, 404). Sie können vorübergehend zu .ttf oder sogar .html zum Testen umbenennen. Die einzigen von IE unterstützten Webschriftarten sind das WOFF-Format. (Nein, noch nie davon gehört!) –
Aus den Google Font Directory Beispiele:
@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;
}
Dieser Cross-Browser mit Ttf funktioniert, ich glaube, es mit OTF arbeiten kann. (Wikipedia sagt OTF mit Ttf meist abwärtskompatibel ist) Wenn nicht, können Sie die OTF convert .TTF
Hier sind einige gute Seiten:
gute Grundierung:
Weitere Informationen:
Vielleicht sollte Javascript aus der Tag-Liste hier entfernt werden? – kzh