Ich arbeite an einer Website, für die Schriftarten online getestet werden müssen. Die Schriften, die ich habe, sind alle im .otf-Format.
Gibt es eine Möglichkeit, die Schriftarten einzubetten, damit sie in allen Browsern funktionieren?
Wenn nicht, welche anderen Alternativen habe ich?
Sie können Ihre OTF Schriftart mit @font-face wie:
@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");
}// Bearbeiten: OTF funktioniert jetzt in den meisten Browsern, siehe Kommentare
Wenn Sie jedoch eine breite Palette von Browsern Ich würde Ihnen empfehlen, zu WOFF y TTF Schriftarten. WOFF Typ wird von jedem größeren Desktop-Browser implementiert, während der TTF Typ ist ein Fallback für ältere Safari-, Android- und iOS-Browser. Wenn es sich bei Ihrer Schriftart um eine freie Schriftart handelt, können Sie Ihre Schriftart konvertieren, indem Sie zum Beispiel ein Transfonter .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}Wenn Sie möchten, dass Unterstützung für fast alle Browser, die es noch gibt (IMHO nicht mehr notwendig), sollten Sie einige weitere Schriftarten hinzufügen, wie z.B.:
@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 */
}Sie können mehr darüber lesen, warum alle diese Typen implementiert sind und ihre Hacks ici . Einen detaillierten Überblick darüber, welche Dateitypen von welchen Browsern unterstützt werden, erhalten Sie unter:
Es funktionierte auf fast allen Browsern einwandfrei... Der einzige Browser, der nicht funktionierte, ist FireFox Linux ... Irgendein Vorschlag für diesen einen ??
Beachten Sie, dass Sie, wenn Sie diese Datei auf einem Windows-Server hosten, den .otf-Dateityp als gültigen und bedienten Dateityp hinzufügen müssen. Der einzige Weg, um zu sehen, dass dies das Problem ist, ist, dem Link zur Schriftart zu folgen (404-Fehler in diesem Fall). Zu Testzwecken können Sie sie vorübergehend in .ttf oder sogar .html umbenennen. Die einzige vom IE unterstützte Webschriftart ist das WOFF-Format. (Nein, davon habe ich auch noch nie gehört!)
Hey, wie sieht es mit der Leistung dieser Art von Schrift aus? Ist sie gut? Oder ist eine andere besser?
Desde el Google Schriftarten-Verzeichnis 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;
}Dies funktioniert browserübergreifend mit .ttf, ich glaube, es könnte auch mit .otf funktionieren. ( Wikipedia sagt, dass .otf meist abwärtskompatibel mit .ttf ist). konvertieren die Umwandlung von .otf in .ttf
Hier sind einige gute Websites:
Gute Grundierung:
Weitere Informationen:
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
1 Stimmen
Vielleicht sollte javascript hier aus der Tag-Liste entfernt werden?