eingebettete schriftart auf website wird nicht angezeigt in IE oder Chrome
Habe ich die folgenden schriftart-setup in den CSS-Code für eine wordpress-basierte Website, die ich Baue, und die Schriften Displays gut in FF, nicht aber im IE(9) oder Chrome(neueste Version).
/* =Typography
-------------------------------------------------------------- */
@font-face {
font-family: 'Humanist';
src: url('fonts/humanist521lightbt-webfont.eot');
src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightBT.ttf') format('truetype'),
url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HumanistIT';
src: url('fonts/humanist521lightitalicbt-webfont.eot');
src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HumanistBo';
src: url('fonts/humanist777blackbt-webfont.eot');
src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist777blackbt-webfont.woff') format('woff'),
url('fonts/Humanist777BlackBT.ttf') format('truetype'),
url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
Wenn ich die schriftart für ein element ich nur hinzufügen font-family: 'Humanist', Arial, sans-serif;
Die fonts im theme-Verzeichnis im Ordner "fonts".
Mache ich etwas falsch oder etwas fehlt, damit es funktioniert mit anderen Browsern?
Dank
- aktualisierten code. Nun nur noch Probleme in Chrome
Du musst angemeldet sein, um einen Kommentar abzugeben.
Internet Explorer 9 und weniger hat einige Probleme anzeigen
.TTF
- Dateien. Es unterstützt keine eingebetteten Schriftarten über die CSS3-Schema, ohne zuerst die Umwandlung in unterstützten Formaten (.svg
,.ttf
,.eot
usw.). Sie können jedoch optimieren Sie Ihr @Font-Face-Syntax, dies zu unterstützen.Mit Chrome nicht angezeigt, die richtige schriftart, dies ist auf verschiedene Browser haben unterschiedliche Bedürfnisse. Weitere Informationen finden Sie in dem zweiten link in der weitere Informationen unten ein.
Einer Seite beachten Sie auch: wenn Sie Ihre Schriften, die gehostet wird auf Google Fonts, Betten Sie einen link in Ihre website statt-hosting-it yourself.
TLDR; brauchen eine umfassende Liste von @font-face-Arten
Mehr Informationen:
ALSO Frage - IE Probleme mit True-Type-Font-Dateien
ALSO Frage - Font-Face-problem in Chrome
Weitere Verhärtung der Kugelsichere Syntax - Fontspring.
Bulletproof @font-face syntax von Paul Irish
.ttf
,.svg
,.eot
, etc)?Verwenden Sie die schriftart für ein HTML-element, dann müssen wir mit der @font-face-Regel macht vollen features von CSS3, die unterstützt viele moderne browser. CSS-Eigenschaft font-family HTML wird verwendet, um definiert den Namen der schriftart, die wir einbinden möchten und src-Eigenschaft verwendet, um definiert den Pfad der schriftart einbetten.