Die @font-face Regel ermöglicht das Laden benutzerdefinierter Schriftarten auf einer Webseite. Sobald sie zu einem Stylesheet hinzugefügt wurde, weist die Regel den Browser an, die Schriftart herunterzuladen, von wo sie gehostet wird, und sie dann wie in CSS angegeben anzuzeigen.
Ohne die Regel sind unsere Designs auf die Schriftarten beschränkt, die bereits auf dem Computer eines Benutzers geladen sind und die je nach verwendetem System variieren. Hier ist eine schöne Übersicht über vorhandene Systemschriftarten.
Allgemeine Browserunterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie detailliertere Informationen finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4 | 4.2-4.3 |
Praktischer Umfang der Browserunterstützung
Die Dinge verändern sich stark in Richtung WOFF und WOFF 2, daher können wir wahrscheinlich damit auskommen
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}Heutzutage könnten Sie wahrscheinlich sogar nur WOFF2 verwenden.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie detailliertere Informationen finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 39 | Nein | 14 | 12 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.0-10.2 |
Das Einzige, was WOFF Ihnen zusätzlich an praktischem Nutzen bringt, ist die Unterstützung von Internet Explorer 11.
Tiefste mögliche Browserunterstützung
Dies ist die Methode mit der derzeit tiefsten möglichen Unterstützung. Die @font-face Regel sollte vor allen anderen Stilen in das Stylesheet eingefügt werden.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}Verwenden Sie sie dann zur Gestaltung von Elementen wie folgt
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Etwas tiefere Browserunterstützung
Wenn Sie eine Art Mittelweg zwischen voller Unterstützung und praktischer Unterstützung benötigen, deckt das Hinzufügen einer .ttf-Datei einige weitere Fälle ab.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Alternative Techniken
@import
Während @font-face hervorragend für Schriftarten geeignet ist, die auf unseren eigenen Servern gehostet werden, kann es Situationen geben, in denen eine gehostete Schriftlösung besser ist. Google Fonts bietet dies als Möglichkeit an, ihre Schriftarten zu nutzen. Das Folgende ist ein Beispiel für die Verwendung von @import, um die Schriftart Open Sans von Google Fonts zu laden.
@import url(//fonts.googleapis.com/css?family=Open+Sans);Dann können wir sie zur Gestaltung von Elementen verwenden
body {
font-family: 'Open Sans', sans-serif;
}Wenn Sie die URL für die Schriftart öffnen, können Sie tatsächlich die gesamte @font-face-Arbeit sehen, die im Hintergrund stattfindet.
Ein Vorteil der Nutzung eines gehosteten Dienstes ist, dass er wahrscheinlich alle Schriftdateivarianten enthält, was eine tiefe Cross-Browser-Kompatibilität gewährleistet, ohne dass wir all diese Dateien selbst hosten müssen.
Ein Stylesheet <link>en
Ähnlich könnten Sie dasselbe Asset verlinken wie jede andere CSS-Datei, im des HTML-Dokuments anstatt in CSS. Am Beispiel von Google Fonts sieht das so aus:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">Dann können wir unsere Elemente wie bei den anderen Methoden gestalten
body {
font-family: 'Open Sans', sans-serif;
}Auch hier werden die @font-face-Regeln importiert, aber anstatt sie in unser Stylesheet einzufügen, werden sie stattdessen in unseren HTML- eingefügt.
Es ist im Grunde dasselbe ... beide Techniken laden die benötigten Assets herunter.
Schriftdateitypen verstehen
Der ursprüngliche Ausschnitt am Anfang dieses Beitrags verweist auf viele Dateien mit seltsamen Erweiterungen. Lassen Sie uns jede davon durchgehen und ein besseres Verständnis dafür bekommen, was sie bedeuten.
WOFF / WOFF2
Steht für: Web Open Font Format.
Erstellt für die Verwendung im Web und von Mozilla in Zusammenarbeit mit anderen Organisationen entwickelt. WOFF-Schriftarten laden oft schneller als andere Formate, da sie eine komprimierte Version der Struktur verwenden, die von OpenType (OTF) und TrueType (TTF) Schriftarten verwendet wird. Dieses Format kann auch Metadaten und Lizenzinformationen in der Schriftdatei enthalten. Dieses Format scheint der Gewinner zu sein und dahin bewegen sich alle Browser.
WOFF2 ist die nächste Generation von WOFF und bietet eine bessere Komprimierung als das Original.
SVG / SVGZ
Steht für: Scalable Vector Graphics (Font).
SVG ist eine Vektor-Neuerstellung der Schriftart, was sie im Dateiumfang viel leichter macht und sie auch ideal für die mobile Nutzung. Dieses Format ist das einzige, das von Safari für iOS Version 4.1 und niedriger erlaubt ist. SVG-Schriftarten werden derzeit von Firefox, IE oder IE Mobile nicht unterstützt. Firefox hat die Implementierung verschoben auf unbestimmte Zeit, um sich auf WOFF zu konzentrieren.
SVGZ ist die komprimierte Version von SVG.
EOT
Steht für: Embedded Open Type.
Dieses Format wurde von Microsoft (den ursprünglichen Innovatoren von @font-face) entwickelt und ist ein proprietärer Dateistandard, der nur von IE unterstützt wird. Tatsächlich ist es das einzige Format, das IE8 und niedriger erkennt, wenn @font-face verwendet wird.
OTF / TTF
Steht für: OpenType Font und TrueType Font.
Das WOFF-Format wurde ursprünglich als Reaktion auf OTF und TTF entwickelt, teilweise weil diese Formate leicht (und illegal) kopiert werden konnten. Allerdings hat OpenType Fähigkeiten, an denen viele Designer interessiert sein könnten (Ligaturen und dergleichen).
Ein Hinweis zur Performance
Web-Schriftarten sind großartig für das Design, aber es ist auch wichtig, ihre Auswirkungen auf die Web-Performance zu verstehen. Benutzerdefinierte Schriftarten verursachen oft, dass Websites einen Performance-Einbruch erleiden, da die Schriftart heruntergeladen werden muss, bevor sie angezeigt wird.
Ein häufiges Symptom war ein kurzer Moment, in dem Schriftarten zuerst als Fallback geladen werden, dann aber zur heruntergeladenen Schriftart blinken. Paul Irish hat einen älteren Beitrag dazu (genannt „FOUT“: Flash Of Unstyled Text).
Heutzutage blenden Browser den Text standardmäßig aus, bevor die benutzerdefinierte Schriftart geladen wird. Besser oder schlechter? Sie entscheiden. Sie können dies durch verschiedene Techniken etwas steuern. Etwas außerhalb des Rahmens dieses Artikels, aber hier ist ein Trifecta von Artikeln von Zach Leatherman, um Sie auf den richtigen Weg zu bringen
- Bessere @font-face-Nutzung mit Font Load Events
- Wie wir Web-Schriftarten verantwortungsvoll verwenden oder einen @font-face-Palm vermeiden
- Flash of Faux Text – noch mehr über Font Loading
Hier sind einige weitere Überlegungen bei der Implementierung benutzerdefinierter Schriftarten
Auf die Dateigröße achten
Schriftarten können überraschend schwer sein, wählen Sie also Optionen, die leichtere Versionen anbieten. Bevorzugen Sie beispielsweise ein Schriftarten-Set mit 50 KB gegenüber einem mit 400 KB.
Zeichensatz nach Möglichkeit einschränken
Brauchen Sie wirklich die Fettschrift und die schwarze Schriftschnitte für eine Schriftart? Das Laden nur dessen, was verwendet wird, ist eine gute Idee, und hier gibt es einige gute Tipps.
Systemschriftarten für kleine Bildschirme in Betracht ziehen
Viele Geräte haben schlechte Verbindungen. Ein Trick könnte darin bestehen, beim Laden der benutzerdefinierten Schriftart über @media größere Bildschirme anzusprechen.
In diesem Beispiel werden Bildschirme kleiner als 1000px mit einer Systemschriftart und Bildschirme, die 1000px oder breiter sind, mit der benutzerdefinierten Schriftart versorgt.
@media (min-width: 1000px) {
body {
font-family: 'FontName', Fallback, sans-serif;
}
}Schriftartendienste
Es gibt eine Reihe von Diensten, die Schriftarten hosten und auch Zugriff auf kommerziell lizenzierte Schriftarten bieten. Die Vorteile der Nutzung eines Dienstes liegen oft in einer großen Auswahl an legalen Schriftarten, die effizient bereitgestellt werden (z. B. über ein schnelles CDN).
Hier sind einige gehostete Schriftartendienste
Was ist mit Icon-Schriftarten?
Es stimmt, @font-face kann eine Schriftartdatei mit Symbolen laden, die für ein Icon-System verwendet werden können. Ich denke jedoch, dass Sie mit SVG als Icon-System viel besser dran sind. Hier ist ein Vergleich der beiden Methoden.
Nächste Schritte mit @font-face
Ein neues responsives Schriftformat für das Web
Grundlagen der Google Font API
Benutzerdefinierte Schriftarten in E-Mails
Google Font API & Interview
Hey hey `font-display`
Das @font-face-Dilemma
Die At-Regeln von CSS
Die Entstehung (und potenziellen Vorteile) einer CSS-Schriftart
Die neue bulletproof @Font-Face-Syntax
Typografie für Entwickler
Web-Schriftarten verstehen und das Beste aus ihnen herausholen
Was ist los mit der Deklaration von Schriftarteigenschaften bei @font-face?
Mehr zur @font-face-Performance
Kopieren Sie nicht einfach @font-face aus Google Fonts URLs
FOUT, FOIT, FOFT
Das Beste aus variablen Schriftarten auf Google Fonts herausholen
Wie man Schriften lädt, um FOUT zu bekämpfen und Lighthouse glücklich zu machen
Wenn Sie FOUT wirklich nicht mögen, könnte `font-display: optional` genau das Richtige für Sie sein
Lernerfahrungen aus einer WebPageTest-Sitzung auf CSS-Tricks
Web-Schriften mit dem Web Font Loader laden
Service-Mitteilung: Achten Sie auf Ihr @font-face font-weight
Drei Techniken für die performante Nutzung benutzerdefinierter Schriften
#152: Schriftarten laden mit Zach Leatherman
#035: Typekit FOUT verhindern
Verwandte CSS-Eigenschaften
font-display
Eine font-display-Einstellung für langsame Verbindungen
Ein neues responsives Schriftformat für das Web
font
font-feature-settings
font-family
font-size
font-style
Schriftstapel
Mehr @font-face Ressourcen
- CSS Fonts Module Level 4 (W3C)
- How to Use the URL Thingy in the
@font-faceRule (DigitalOcean)
Nur als Vorschlag, ich denke, Sie sollten die Bulletproof Methode von Paul Irish verwenden. Dies scheint ein direkteres, schnelleres (weniger HTTP-Anfragen) Format zu sein. Beispiel
Ich stimme Eddie zu, außer dass TTF- und OTF-Schriften alle EOT-Versionen haben? Ich bin mir nicht sicher, zum Beispiel kann man sowohl eine TTF- als auch eine EOT-Version der Schriftart Calibri finden. Es scheint, dass ein Befehlszeilen-Dienstprogramm existiert, um TTF- und OTF-Schriften in EOT zu konvertieren, also könnte das die beste Lösung sein, aber es scheint sicher eine mühsame Aufgabe zu sein.
fontsquirrel.com ermöglicht es Ihnen, eine Schriftart hochzuladen (stellen Sie sicher, dass die Lizenz dies zulässt) und erstellt dann die verschiedenen Versionen der Schriftart für Sie.
Das ist großartig. Ich habe eine Frage: Lade ich die Schriften auch auf den Server hoch? Wenn ja, in welchen Ordner?
Hallo,
Ich verstehe nicht, wo ich eine *.eot-Datei oder eine *.otf-Datei finden kann. Gibt es eine Methode, sie zu generieren?
Vielen Dank.
Das sind die Schriftdateien. Die Erweiterung .otf ist eine Open-Type-Schrift.
Was mache ich, wenn eine Schriftart Leerzeichen hat, zum Beispiel ich habe eine Schriftart namens "some font", aber der Dateiname ist somefont.ttf
genau das, was Sie gerade getan haben: die beiden Wörter „in Anführungszeichen setzen“
Wie oben erwähnt fontsquirrel.com.
Danke, Chris!
Ich wusste, dass ich das schon einmal benutzt hatte, aber ich konnte mich nicht erinnern, wo ich das Konvertierungstool gefunden hatte. Hat mir viel Zeit gespart.
Muss ich für die Verwendung einer TrueType-Schrift eine lokale Schrift angeben? Es ist eine selbst erstellte Schrift, die wahrscheinlich niemand verwenden wird.
Ich hatte ein Problem damit, dass die von mir verwendete Schriftart in kleinen Größen nicht richtig gerendert wurde. Ein paar Stunden später (und ein paar graue Haare) habe ich herausgefunden, dass wenn Ihr Stylesheet verwendet
das @font-face muss draußen sein. Wie hier
DANKE! Ich bin verrückt geworden und habe mich gefragt, warum das in FF und IE nicht funktionierte, und das hat es behoben.
Sie haben mir nach 3 Tagen geholfen, in denen ich verrückt geworden bin und versucht habe herauszufinden, warum meine Fontfaces in IE nicht funktionierten.
Danke!
Wirklich vielen Dank, Mann
Ich habe Probleme beim Hochladen von Schriften (mit Cyberduck) auf meinen Server (kein SSH-Zugriff), sie sind 0 KB groß. Fontsquirrel gibt mir auch einen Fehler (IO-Fehler), übersehe ich etwas? Ich bin auf einem Mac und habe mehrere Schriften ausprobiert, aber keine funktioniert.
Ich bin mir beim Hochladen nicht sicher, aber ich bekam den IO-Fehler von fontsquirrel.com, als ich Chrome benutzte, und wechselte zu FF, und es wurde erfolgreich hochgeladen. Ich weiß nicht, ob das jemandem hilft, aber für mich hat es funktioniert.
Ich benutze die Bulletproof-Methode von Paul Irish, aber in IE7/8 hat sie bei mir nicht funktioniert, stattdessen haben Firefox und Opera gut funktioniert!!
Ich werde diese Lösung ausprobieren
in IE und werde Ihnen sagen, ob es funktioniert.
Wie Chris hier mehrmals erwähnt hat: „fontsquirrel.com. Sie konvertieren nicht nur Ihre Schriften, sondern generieren auch CSS-Dateien mit der „Bullet Proof“-Methode, die Paul Irish empfiehlt.
Wenn Ihre Schriftlizenz das Hochladen über FontSquirrel nicht zulässt, haben Sie Pech gehabt.
Ich habe hier ein ernstes Problem mit font-face, als ich die Seite druckte, stellte ich fest, dass der Betrachter meine Schriftart nicht anzeigte. Wie definiere ich meine Schriftart beim Drucken der Seite?
Danke
Ich habe dasselbe Problem.
Hat jemand Ideen?
Haben Sie Fallback-Schriften in Ihrer font-family-Regel?
So wie das
Und/oder Sie können immer eine „sichere“ Schriftart in Ihren Druckstilen definieren.
Ich habe ein frustrierendes Problem. Ich bekomme @font-face unter Windows XP überhaupt nicht zum Laufen. Ich habe Windows Vista auf einem Computer und habe es in allen Browsern getestet, aber als ich es unter Windows XP überprüft habe, wird @font-face überhaupt nicht erkannt. Ich habe ein Dutzend Ideen ausprobiert und alle sind unter XP fehlgeschlagen. Ich muss es unter XP zum Laufen bringen, es ist immer noch ein beliebtes Betriebssystem. Irgendwelche Ideen?
Welchen Browser verwenden Sie auf dieser WinXP-Maschine?
IE6? IE7,8,9?
Firefox?
Wo sollten die hochgeladenen Schriftdateien liegen? Ist es relativ zur URL? Wenn es nicht im Root-Verzeichnis hochgeladen wird, muss ich dann die Pfadverweise in der src angeben?
src: url(‘Delicious-Bold.otf’); statt src: url(‘/font/Delicious-Bold.otf’);
Danke
James
Ich habe dies experimentell getestet und ja, es funktioniert wie erwartet; es ist relativ zum Root-Web-Verzeichnis.
James
Gibt es eine Möglichkeit, vorhandene OTF-Schriften zu modifizieren?
In meiner Sprache verwenden wir einige Schriften, die spezielle Symbole haben. Deshalb frage ich.
Danke.
Versuchen Sie FontForge, es ist kostenlos.
Ja, ich habe auch festgestellt, dass die Methode von Paul Irish in IE6 nicht funktioniert. Aber diese Methode funktioniert wirklich, sogar in IE5.
Sie können die Demo unter: http://www.960development.com/how-to-write-cross-browser-font-face-syntax/ überprüfen
Toller Artikel, ich hoffe, nach der Verwendung dieser Methode müssen wir Cufon oder sIFR für den Schriftartenaustausch nicht mehr verwenden.
Was ist mit dem „ClearType-Bug“?
Ich meine, ich weiß, dass es dafür eine Lösung gibt, aber nur für IE6/7.
Was ist mit dem Rest? :(
Kann man diese Syntax beim Versenden von Newslettern verwenden?
Müssen Sie eine Variation anwenden?
Es gibt eine NEUE BULLET-PROOF-Version hier ab April 2011
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Zum Beispiel:
Ich habe auf die harte Tour gelernt, dass man den @font-face-Code in den der Seite einfügen muss. Er wird nicht aus der CSS-Datei bezogen!
Außerdem führen die von Font Squirrel bereitgestellten .eot-Links dazu, dass der Code in IE8 fehlschlägt. Ich musste die src-Links entfernen, und es funktionierte trotzdem! Es funktionierte sogar auf anderen Computern, auf denen die Schriftart nicht installiert war.
Warum das in IE so funktioniert, weiß ich nicht. Ich glaube nicht, dass dieses Programm zu durchschauen ist.
ChrisB
@font-face funktioniert in einer CSS-Datei. Stellen Sie sicher, dass Ihre src-Pfade relativ zum Root-Verzeichnis sind. Versuchen Sie den Code von AceeBaba oben. Nur stellen Sie sicher, dass das Format 'embedded-opentype' und nicht nur 'eot' ist.
Was die EOTs von Font Squirrel betrifft, sie scheinen bei mir in IE8 zu funktionieren. Könnte am Format liegen, wie ich oben sagte.
Außerdem sehe ich nicht, wie Sie es auf anderen Computern ohne die src-Links zum Laufen gebracht haben. Es sei denn, Sie haben sich entschieden, einen externen Link von Google oder jemand anderem zu verwenden. Was ich nicht empfehlen würde, da dies die Ladezeit der Seite erhöht. Aber wenn Sie es tun, stellen Sie sicher, dass es über Ihren CSS-Links steht, sonst wissen sie nicht, dass es da ist.
Steve,
Vielen Dank für den Vorschlag. Ich habe darauf geachtet, dass die Dateien von einem Root-Verzeichnis aus bezogen wurden, aber aus irgendeinem Grund konnte ich den Code nie zum Laufen bringen. Es ist mir unerklärlich, warum die Schriftart in IE ohne die Quellen funktioniert, selbst in IE8!
Hallo, ich habe ein Website-Mockup in Photoshop mit der Arial 12px Schriftart entworfen, aber wenn ich es in HTML umsetze, sieht die Arial-Schriftart im HTML-Browser anders aus. Gibt es eine Lösung dafür? Muss ich wirklich wissen.
Danke
Ich weiß, dass dies fast zwei Monate alt ist, aber falls Sie diesen Beitrag noch einmal aufrufen...
Photoshop hat eine Antialiasing-Funktion im Textwerkzeug. Sie befindet sich neben der Dropdown-Liste für die Schriftgröße in der oberen Werkzeugleiste und in der unteren rechten Ecke des Zeichenfensters. Normalerweise ändere ich dies für jeden Text, der browsergeneriert wird, auf „keine“ im Dropdown-Menü.
Es ist nicht genau die gleiche Textdarstellung, aber es ist das Beste, was wir im Moment haben. Es gibt wirklich kein branchenübliches Werkzeug, das Text identisch mit dem Browser rendert (der je nach Browser und Plattform unterschiedlich rendert).
Ich hoffe, das hilft. Prost!
Hallo ... tolle Seite! ... Ich versuche die GoogleWebFonts als @font-face auf meiner Seite zu verwenden, aber in Google Chrome sehen sie nicht so gut aus wie in IE oder FF. Ich habe etwas über ClearType gelesen, aber diese Änderung ist auf der Client-Seite, also ergibt das für mich keinen Sinn.... Wisst ihr eine Möglichkeit, das zu beheben? (die Schriften sind .ttf)
Danke!
Es funktioniert nicht in FF6
Sehr geehrte Damen und Herren,
Ich habe den folgenden Code verwendet, der in IE8/7 nicht funktioniert, aber in IE9 funktioniert.
Hinweis: Diese Schriftart unterstützt die arabische Sprache
Ich schätze Ihre Unterstützung, helfen Sie mir bitte umgehend.
Danke!
Es funktioniert immer noch nicht!
Ich habe es getestet und gesehen, dass es in Persisch oder Arabisch nicht funktioniert!!!
Ich habe ein Problem mit meinen Schriftgrößen! Meine Schriftgröße ist zum Beispiel 41px und passt perfekt, aber wenn sie auf Arial zurückfällt, verdoppelt sich die Schriftgröße! Wie ziele ich nur auf @font face, muss ich eine zweite Stylesheet nur für @font face angeben?
Ich habe eine Schriftart von fontspring.com (Avalon) gekauft, um sie auf http://www.dealscout.co.za zu verwenden
Ich benutze die @fontface-Deklarationen, die sie in der Beispieldatei mit der Schriftart bereitstellen, aber die Schriftart selbst erscheint in Chrome und auf einigen älteren Browsern sehr „gezackt“.
Die Deklaration lautet wie folgt:
Haben Sie Vorschläge, was wir falsch machen, das dies verursacht, oder sollten wir uns nach einer neuen Schriftart umsehen?
Wenn ja, haben Sie Empfehlungen für Schriftarten im Avalon / Century Gothic Stil, die eine bessere Cross-Browser-Unterstützung haben?
Ich habe dasselbe Problem mit Avalon Book in Chrome. Haben Sie jemals eine Lösung gefunden?
Super späte Antwort, aber…
Es ist ein Problem mit der Art und Weise, wie Google Schriftarten rendert (GDI statt Directwrite), und es wird in der neuesten Canary-Version von Chrome behoben, die hoffentlich später in diesem Jahr veröffentlicht wird. Bis dahin gab es viele Hacks, um Schriftarten entsprechend aussehen zu lassen. Ich fand, dass die Verwendung von
http://sassycoder.wordpress.com/2013/11/16/font-face-rendering-issue-in-chrome-2/
In Kombination mit einigen CSS-Hacks wie text-stroke / text-shadow funktioniert es meistens ziemlich gut für die meisten Schriften. Machen Sie sich keine Gedanken über -webkit-font-smoothing, es wird nicht mehr unterstützt.
Ich verwende einen einfachen Selektor im Head in HTML, aber meine Schriftart funktioniert nicht.
Stylesheet auf einer Seite
h1{fontface:”monotype corsiva”; size:10; color:”red”; fontweight=:bold}
h2{font-face:”arial”; size:5; color:”blue”; fontweight=:bold}
h3{font face:”magento”; size:20; color:”yellow”; fontweight=:bold}
h4{font face:”times new roman”; size:15; color:”green”; fontweight=:italic}
DER SCHNELLE BRAUNE FUCHS SPRINGT ÜBER DEN FAULEN HUND
DER SCHNELLE BRAUNE FUCHS SPRINGT ÜBER DEN FAULEN HUND
DER SCHNELLE BRAUNE FUCHS SPRINGT ÜBER DEN FAULEN HUND
DER SCHNELLE BRAUNE FUCHS SPRINGT ÜBER DEN FAULEN HUND
Bitte lassen Sie mich die Lösung wissen, entweder hier oder per E-Mail: [email protected]
Haben Sie die CSS-Datei mit @font-face mit Ihrem HTML-Dokument verbunden? Wo sind Ihre Dateien platziert? Auf welchen Browsern haben Sie getestet?
"fontweight" sollte "font-weight" sein und nur einen Doppelpunkt haben, nicht ein Gleichheitszeichen.
Außerdem sind die einzigen Werte für font-weight "normal" oder "bold".
Um kursiven Text in Ihrer h4 anzugeben, verwenden Sie: "font-style:italic; "
Wofür wird diese Seite verwendet?
Warum benutzen Leute IE6/5!! Lol, schöner Artikel, danke für die hilfreichen Links
Hallo,
Ich habe ein Problem mit @font-face
Ich habe alles (glaube ich) so eingerichtet, wie es sein sollte. Wenn ich einen Test des HTMLs in Dreamweaver mache, wird es wie im Traum angezeigt, aber wenn ich es per FTP hochlade und die Seite aufrufe (nachdem der Cache geleert wurde), sind es wieder nur Systemschriftarten.
Wenn mir jemand helfen könnte, wäre ich sehr dankbar!
Vielen Dank
Ich habe dasselbe Problem! Wurde es jemals gelöst? Ich habe zuerst @font-face verwendet, um das Antialiasing in Chrome mit Google Webfonts zu beheben (oh, die Ironie), und jetzt, wo ich die Seite auf meinen Server gestellt habe, verliert sie die feste Qualität.
Danke!
Hallo Chris,
Hilfreicher Artikel, ich würde gerne mehr über @font-face und mehrsprachige Unterstützung sehen. Bald beginne ich ein Projekt, das Unterstützung für Arabisch und Russisch sowie westliche Sprachen benötigt.
@font-face funktioniert nicht gut mit CSS-Übergängen. Es wird ganz träge und langsam.
Nach ein paar Tagen der Installation funktionieren meine CSS-Webfonts nicht mehr wie zuvor. Jetzt ist die Seite durcheinander. Aber wenn ich sie auf Chrome (sogar Safari) überprüfe, sehen die Schriftarten genau richtig aus. Der einzige Unterschied ist bei Firefox. Ich bin mir nicht sicher, ob er aktualisiert wurde oder nicht, aber derzeit ist meine Version 8.0.1 auf Mac.
Wenn mir jemand Lösungen anbieten könnte, wäre das eine große Hilfe. Mein CSS-Code lautet wie folgt und alle wurden von fontsquirrel.com generiert. Die notwendigen Dateien wurden ebenfalls hochgeladen. Nichts wurde am CSS geändert, aber ich frage mich, warum es nach ein paar Tagen nicht mehr richtig aussah. Vielen Dank im Voraus.
*Ich habe den gesamten Link zum Verzeichnis der Quellen der Schriftarten in den eigentlichen CSS-Code eingefügt. Ich habe ihn für Sicherheitszwecke aus diesem Kommentar entfernt. Danke.
Versuchen Sie, @font-face vor allen anderen Stilen zu platzieren.
Hallo Chris,
Ich habe die eingebettete Schriftart verwendet, sie funktioniert gut. Der CSS-Pfad ist css/index.css
und der Schriftartenpfad ist
@font-face {
font-family: ‘test’;
src: url(‘../font/test.eot’);
einige andere CSS-Codes..
es funktioniert gut.
mein Wurzelindex.html Ordner.
aber wenn ich einen neuen Ordner wie newfolder hinzufüge und eine neue index.html-Datei hinzufüge. Schriftarten werden nicht angezeigt.
was ist der richtige Weg, um den Pfad zu den CSS- und eingebetteten Schriftarten anzugeben, damit sie überall funktionieren?
danke
Hallo Chris,
Ich habe Google Fonts heruntergeladen und festgestellt, dass die einzigen beiden Formate in dem, das ich verwende, ttf und menu sind. Ich habe versucht, im Internet nach Informationen über die .menu-Erweiterung zu suchen, aber nichts gefunden. Wissen Sie, wofür diese Erweiterung ist?
Danke
Hallo! Ich lese Ihren Weblog schon lange und habe endlich den Mut gefunden, Ihnen aus Dallas, Tx, zuzurufen! Wollte nur sagen, machen Sie weiter so!
Danke, das suche ich. Sehr nett, Mann.
Nachdem ich diese Anweisungen befolgt habe, gibt es Leerzeichen zwischen den Buchstaben eines Wortes ...
Irgendwelche Vorschläge ... ???
Nur eine schnelle Korrektur für alle anderen, die dieses Problem haben.
Diese Lösung funktionierte aus irgendeinem Grund nicht mit IE6. Schließlich fand ich heraus, dass der Hash danach es kaputt machte.
Kurz gesagt, verwenden Sie dies, wobei
#iefixentfernt wird.url('webfont.eot?') format('embedded-opentype'), /* IE6-IE8 */Ich kann @font-face nicht für IE7 verwenden. Wenn jemand eine Lösung dafür hat, helfen Sie mir..
Sie können alle Schriftformate von http://www.font2web.com/ erhalten.
Meine Schriftart wird in IE7 nicht angezeigt. Sie funktioniert, wenn ich sie in einer anderen Datei ausprobiere, aber nicht, wenn sie in meine Website integriert ist. Bitte helfen Sie.
Sraddha,
Vielen Dank für Ihre Informationen!
Wenn ich mir caniuse.com ansehe, fallen mir 3 Dinge auf
1) Alle IE unterstützen eot
2) Alle aktuellen/modernen Browser unterstützen ttf
3) Opera Mini unterstützt überhaupt kein Format
Basierend darauf würde ich vorschlagen, dass die Einbeziehung von eot und ttf mehr als genug ist? Warum woff und svg einbeziehen?
Schöne Idee Evert, ich stimme dir zu. Es hängt von jedem Entwickler ab, wie er @font-face CSS implementiert.
WOFF ist weniger als die Hälfte der Dateigröße von TTF (und WOFF2 ist noch kleiner).
ICH LIEBE DICH!!!
Ich brauchte genau DAS für mein Stylesheet und meine Website.
Vielen Dank!
Wenn ich den Font-Family-Namen wie oben "test" schreibe und dann
src:url(...), funktioniert es nicht mit diesem Font-Family-Namen "test". Bitte helfen Sie mir, wie man Font-Family-Namen außer "Font-Namen" erstellt.Danke
Ich habe ein seltsames Problem mit der Arial-Schriftart unter Firefox, die Schriftgröße 17px ist viel breiter als bei Chrome, IE 7/8. Ich frage mich, ob mir jemand helfen könnte.
Ich weiß nicht warum, aber ich bekomme diese Google-Schriftart nicht zum Laufen in Firefox (oder in irgendeinem anderen). Sie funktioniert wunderbar in IE, und ich habe die TTF, die Google Fonts mir von Fontsquirrel geliefert hat, konvertiert, um alle benötigten Teile zu erhalten und sie im selben Ordner wie die CSS-Datei aufzubewahren. Kann jemand sehen, was falsch ist?
@font-face {
font-family: Voces;
src: url(‘Voces.eot’);
src: url(‘Voces.eot?#iefix’) format(’embedded-opentype’),
url(‘Voces.woff’) format(‘woff’),
url(‘Voces.ttf’) format(‘truetype’),
url(‘Voces.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face funktioniert nicht richtig unter Ubuntu OS. Die Schriftarten sehen unscharf aus. Gibt es eine Lösung?
Danke für diese Tricks
Hallo! Ich brauche bitte Hilfe
Ich arbeite mit Webmatrix 7.1 und IIS 7.5 Express... es ist tatsächlich mein erstes Mal mit Webmatrix, und die Schriftarten, die ich verwende, werden nicht gerendert....
Das ist eine der Schriftarten
@font-face{
font-family:MenuFont;
src:url(‘Fonts/Arizonia-Regular.eot’);
src:url(‘Fonts/Arizonia-Regular.eot?#iefix’) format(’embedded-opentype’),
url(‘Fonts/Arizonia-Regular.ttf) format(‘truetype’),
url(Fonts/Arizonia-Regular.woff) format(‘woff’),
url(‘Fonts/Arizonia-Regular.svg#MenuFont’) format(‘svg’);
}
.Menu ul li a{
font-family:MenuFont, sans-serif;
text-decoration:none;
color:#000000;
}
Ich drehe also durch... Ich glaube nicht, dass ich etwas falsch mache, denn das habe ich zuerst in .html mit Notepad gemacht und die Schriftarten wurden korrekt gerendert. Kann mir jemand helfen oder mir sagen, ob es Kompatibilitäts- oder Unterstützungsprobleme gibt? Ich würde es sehr schätzen!!
Danke!
Entschuldigen Sie, Chris Coyier,
Welchen CSS-Code müsste ich für .otf-Schriftarten schreiben?
Danke
Lucas
Ich habe ein Problem mit Firefox erlebt, als meine default.html im Stammverzeichnis die font face in allen Browsern funktioniert, aber wenn ich meine default.html in den Ordner en verschiebe, funktioniert font face in Firefox nicht, aber in allen anderen Browsern.
Ich habe eine aktuelle Version von Firefox
Ich hatte dasselbe Problem mit Firefox (12.0). Wenn ich die Schriftarten in meinen Stammordner lege, werden sie in allen Browsern gut angezeigt. Aber wenn ich sie in einen Unterordner mit dem richtigen Pfadcode lege, funktionieren alle Browser außer Firefox. Was verursacht das? Ich möchte organisiert bleiben und meine Schriftarten in einem Unterordner aufbewahren. Hat jemand einen Weg gefunden, das zu umgehen?
Ich bekomme die richtige Ausgabe in allen Browsern, aber beim Drucken in Firefox funktioniert die Web-Schriftart nicht, unten ist mein CSS.
@font-face {
font-family: ‘C39P24DmTtNormal’;
src: url(‘WebFonts/v100025_-webfont.eot’);
src: url(‘WebFonts/v100025_-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘WebFonts/v100025_-webfont.woff’) format(‘woff’),
url(‘WebFonts/v100025_-webfont.ttf’) format(‘truetype’),
url(‘WebFonts/v100025_-webfont.svg#C39P24DmTtNormal’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Jemand ist in fontsquirl verliebt oder bekommt eine Provision...
Glücklicherweise habe ich meinen eigenen Server, also brauche ich all diesen möchtegern-aber-nicht-sein-prätentiösen Kram nicht.
Tatsache ist, dass all diese Leute nur Ihre Daten wollen, damit sie Sie von hinten bekommen können! (wie Facecrook und Google und all diese schlauen, prätentiösen Leute. Glücklicherweise bin ich das nicht... und Sie auch nicht ;-)
Ich empfehle dringend – verwenden Sie ein Internet-Kondom (es sei denn, Sie suchen Mitleid) – halten Sie sich von all diesen Drittanbieter-"Dienstleistern" fern und bleiben Sie sicher!
Worüber faselst du, du Trottel. "Fontsquirl" ist kostenlos... Und Font Squirrel auch. Zeit, vom Computer wegzugehen und zu Ihrem Raketenwissenschaftsprojekt zurückzukehren.
Hallo,
Ich plage mich seit Stunden damit herum und kann es einfach nicht herausfinden.
Ich kann Webfonts in den meisten Browsern zum Laufen bringen, aber wenn ich es für Internet Explorer 7 zum Laufen bringen will, muss ich das HTML, das CSS und die Schriftdateien im selben Ordner ablegen!
Das wird ziemlich unübersichtlich, weil ich die Six-Caps-Schrift für Überschriften verwende und keine geeignete Fallback-sichere Schriftart dafür finden kann.
Seltsamerweise kann ich das nirgendwo anders finden, und wenn ich es mit Dateien aus Lyndas Tutorial teste, funktioniert es für IE problemlos.
Da es für alle wichtigen Browser (einschließlich IE8 und IE9) funktioniert, gehe ich davon aus, dass die Pfade korrekt sind, und da sich meine Testseite nicht im Stammverzeichnis befindet, kann ich ihr während der Entwicklung keine absoluten Pfade geben.
Ich benutze die exakte neueste Fontsquirrel-Syntax aus den heruntergeladenen Webfont-Kits.
Ist es möglich, dass IE7 einen anderen Pfad in CSS verwendet, oder dass es bei anderen Browsern funktioniert, weil ich bereits eine lokale Kopie habe?
Mit freundlichen Grüßen,
isabel
Das funktioniert bei mir, aber die Schrift wird in einem schwereren Schnitt gerendert als wenn ich einfach leichtsinnigerweise die einfache
@font-face {
font-family: ‘Baskerville’;
src: url(‘baskerville.ttc’);
}
verwendet hätte, gleiches gilt für andere Schriftarten, nicht nur für diese. Könnte das daran liegen, dass das von mir mit dem font2web.com-Tool zu EOT konvertierte eine schwerere, hässlichere EOT-Version erstellt hat?
Wenn ja, wie kann ich den Browser dazu bringen, die schönere Version zu "bevorzugen"?
Diese Frage ist der Grund, warum ich auf diese Seite gekommen bin. Oft sehen Webkit-Browser furchtbar aussehende Schriftarten in ihren eigenen Formaten auf Windows-Rechnern... Macs laden die gleiche Schriftart auf der gleichen Webseite in meinem Fall gut. Ich bin mir nicht sicher, wie ich ein solches Problem überhaupt lösen soll.
Ich benutze die Paul Irish-Methode (auf einer derzeit privaten Seite), die in Safari gut funktioniert, aber nicht in Firefox (ich benutze Aurora). Meine Dateien werden in der Apple Cloud gehostet, nicht auf meinem eigenen Server. Weiß jemand eine gute Lösung?
Ich dachte, ich würde die Schriftarten für IE7-8 vergessen. Danke!
in IE <= 8 werden einige Eigenschaften nicht unterstützt
* Es wird nur eine URL unterstützt
* Format wird nicht unterstützt
@font-face {
font-family: 'BMitra';
src: url('fonts/BMitra.eot?#');
}
@font-face {
font-family: ‘NumansRegular’;
src: url(../font/Numans-Regular-webfont.eot);
src: url(../font/Numans-Regular-webfont.eot?#iefix) format(’embedded-opentype’),
url(../font/Numans-Regular-webfont.woff) format(‘woff’),
url(../font/Numans-Regular-webfont.ttf) format(‘truetype’),
url(../font/Numans-Regular-webfont.svg#NumansRegular) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Ich habe @font-face erfolgreich in meiner CSS-Datei eingerichtet und es funktioniert für eine bestimmte Klasse, aber ich möchte, dass diese Schriftart als Standard für ein body-Tag gesetzt wird. Ich habe die CSS wie folgt angegeben...
body { font:12px ‘NumansRegular’, Arial, sans-serif;} (funktioniert nicht)
aber es wird nicht als Standard-Schriftart und -Größe für alle meine HTML-Seiten angewendet. Können Sie mir bitte helfen, wie ich die Schriftart 'NumansRegular' als Standard-Schriftart verwende??
Wie kann ich vermeiden, dass eine Webfont (z.B. Mylius Modern) dynamisch von einer Website geladen wird, wenn sie bereits lokal auf dem Computer vorhanden ist?
Hallo
Ich brauche Ihre Hilfe: meine Frage ist
mein Kunde hat mir eine zusätzliche Schriftart gegeben, ich habe die .ttf-Datei in meinen css/font-Ordner eingefügt.
Jetzt versuche ich, die .ttf-Schriftdatei auszuführen. Ich habe bereits etwas Code aus dieser Konversation übernommen, aber es funktioniert immer noch nicht. Bitte führen Sie mich:-(
Ich kann es mit IE nicht zum Laufen bringen. Firefox und Google Chrome.
Am besten, einfachsten und funktioniert sowohl in Chrome als auch in IE8...
Unglaublich!!! Es funktioniert perfekt!
Danke
Firefox hat einen Fehler bei der Druckvorschau bei der Verwendung von @font-face. Ich habe auch Cufon ausprobiert, und dies erschien auch nicht im Druck für Firefox. (So viel für meine hübsche Lebenslaufschrift!)
Obwohl der Fehler als behoben markiert ist, ist er es offensichtlich nicht.
https://bugzilla.mozilla.org/show_bug.cgi?id=468568
Hallo Lore
Haben Sie jemals eine Lösung gefunden?
/Bilal
Ich habe ein Problem mit IE9
Hier ist das minimalistische Beispiel
CSS
HTML
"`Normal neu laden
“`
Es funktioniert einwandfrei vom lokalen Ordner aus. Es funktioniert nicht, wenn es von IIS geladen wird (obwohl die eot-Datei korrekt geladen wird). Aber es funktioniert wieder, wenn ich die Seite durch Klicken auf den Link in HTML neu lade. Und es bricht wieder ab, wenn ich die Seite durch Klicken auf die Schaltfläche Aktualisieren neu lade. Was ist falsch?
IE ist so ein kranker Browser :/
Wie kann ich font face für LetterGothicStd verwenden, weil diese Schriftart nicht auf der fontsquirrel-Website konvertiert werden kann?
Ich bin mir nicht sicher, ob das schon erwähnt wurde, aber Google Fonts sind viel einfacher zu verwenden, als sich mit TTF- und OTF-Dateien herumzuschlagen. Es gibt eine riesige Auswahl, so dass man normalerweise etwas finden kann, das nah genug ist und urheberrechtsfrei für kommerzielle Projekte ist.
http://www.google.com/webfonts
Hallo, danke für diesen Beitrag. Ich habe mich jedoch gefragt: Was ist der Zweck des Fragezeichens (?) vor "#iefix" in dieser Zeile?
src: url(‘webfont.eot?#iefix’) …
Über einige dieser Merkwürdigkeiten können Sie hier lesen: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Wenn ich den Chrome-Browser benutze, tritt ein IO-Fehler auf!
Sollte "MyFontFamily" in "Verwendung" im Beispiel am Anfang der Seite "MyWebFont" sein, um der @font-face-Deklaration zu entsprechen?
Gibt es eine Lösung (ich bin auf dem Stand, wo schmutzige Lösungen akzeptiert werden), die das Font-Smoothing von @font-face-Schriftarten in Chrome behebt oder zumindest verbessert?
Ich habe versucht, die SVG-Schriftart vor EOT zu platzieren, die text-shadow-Eigenschaft und zuletzt font-smoothing, aber nichts scheint zu funktionieren.
Danke
Danke Chris! Du rockst.
Hallo, ich bin nicht wirklich gut oder vertraut mit CSS und anderen Webdesign-Sachen, daher entschuldige ich mich für meine Frage.
Ich habe eine Schriftart für meine Website verwendet, die auf einem typischen PC nicht wirklich zu finden ist, also als mein Klassenkamerad die Webseite hochlud, wurde die Schriftart des Textes der Webseite zu Times New Roman. Meine Frage ist also, wie kann ich die Webseite mit der von mir verwendeten Schriftart hochladen? Bitte helfen Sie mir.
endlich gelöst
Hallo, ich habe einige Zeit damit verbracht, dieses Problem in meinem Web zu lösen, endlich funktioniert es in allen Browsern korrekt, ich habe diese wichtigen Schritte zusammengestellt
1) Wenn Sie einen Schriftarttyp (ttf. otf) haben, konvertieren Sie ihn in alle Formate (eot, svg, woof) in (http://www.font2web.com/) und laden Sie ihn in Ihren Web-Root-Ordner herunter, um ihn zu verwenden.
2) Verwenden Sie diesen Code (ändern Sie "font-family", "myfont" und verwenden Sie absolute URLs, um Dateien zu finden), es ist sehr wichtig, diesen Code in einer einfachen Zeile zu verwenden, ohne Zeilenumbrüche.
3) Testen Sie auf Ihrem Server, auf meinem lokalen Server mit xampp funktioniert es gut, aber auf dem IIS Internet Public Server funktioniert es nicht in IE9, das Problem ist
IIS 7 hat keine MIME-Typen für .woff-Dateien definiert
Wenn Sie versuchen, .woff-Schriftart (http://absoluteURL/myfont.woff) in IE9 zu öffnen, erhalten Sie einen Fehler 404.
Um dies zu lösen, öffne ich IIS, rootServer / MIME-Typen und füge MIME-Typen mit (Extension = .woff, MIME Type = application/x-font-woff) hinzu.
4) Schließlich versuche ich erneut, die Datei zu öffnen http://absoluteURL/myfont.woff und es funktioniert gut, ich öffne mein Web und es funktioniert gut in allen Browsern.
Danke
Ich arbeite an einem WP-Theme-Projekt, ich habe font-face mit einer thailändischen Schriftart ausgewählt.
Thailändische und englische Zeichen aus der Schriftart funktionieren beide gut in mehreren modernen Browsern,
aber thailändische Zeichen funktionieren auf meinem Handy nicht, stattdessen wird die Standard-Thai-Schriftart angezeigt. Auf der anderen Seite funktionieren englische Zeichen aus der Schriftart sehr gut auf meinen Mobilgeräten.
Ich benutze HTC A one und Samsung Note,
und ich hatte noch keine Gelegenheit, andere Geräte auszuprobieren
Irgendwelche Ideen?
Ich habe keinen Erfolg damit, Google Fonts über die Font-Face-Methode aufzurufen. Ich habe Googles Anweisungen mit dem Link href befolgt
Was funktioniert, wenn ich direkte Stylesheet-Referenzen mache, wie
oder direkt in einem Stil innerhalb des HTML. Aber ich möchte einen Font-"Alias" namens Header-font erstellen, dem ich verschiedene Google Fonts zuweisen kann, um zu sehen, wie sie auf meiner gesamten Website angezeigt werden. Font-face scheint die Lösung zu sein, aber es funktioniert nur mit residenten Schriftarten oder direkten URL-Schriftarten... Ich kann nicht herausfinden, wie es eine Google-Schriftfamilie erkennt. Ich habe verschiedene Möglichkeiten versucht, sie aufzurufen, wie z. B.
und eine Million Variationen von src, wie z. B.
und nichts funktioniert. Irgendwelche Ideen, wie das erreicht werden kann, abgesehen davon, jede Google-Schriftart herunterzuladen, die ich testen möchte, und sie lokal aufzurufen?
Gibt es eine Möglichkeit, wie ein Browser die Schriftart lokal (ohne Internet) erhält, sobald er sie über das Web (mit Internet) heruntergeladen hat?
@chris: Vielen Dank dafür!
@Curtis: Hast du es mit src: url(‘Oranienbaum.ttf’); getestet?
Das hat bei einer anderen Schriftart in meinem Browser funktioniert.
@font-face, ich sehe, dass kondensierte Schriftarten (zum Beispiel Futura Condensed Light oder Bold) in IE8 und früheren Versionen nicht gerendert werden. Hat jemand eine Idee, wie man das beheben kann?
Gibt es eine richtige Lösung für das Firefox-Schriftart-Rendering-Problem (nur auf Macs)?
Immer noch vorhanden mit einer selbst erstellten Icomoon-Schriftart, erstellt aus SVGs.
Beispiel Win | FF (21) unter IOS
https://www.dropbox.com/s/fg9z2j5sw4ai3au/fonts-error.png
(Sandfarbener Pfeil als Schriftart auf weißem Hintergrund, in FF wird die Schriftart zu fett gerendert, der Pfeil ist nicht sichtbar)
Angewandte CSS-Eigenschaften
speak: none;
content: attr(data-icon);
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
Irgendwelche Ideen?
(Ich habe versucht: Schriftgrößen in Pixeln statt in em, mit font-weight gespielt..., aber keine guten Ergebnisse erzielt /eigentlich genau dasselbe bekommen/)
Ich frage mich, warum, aber es scheint, dass einige Schriftarten unter IE8 gerendert werden und einige einfach nicht wollen...
Ich benutze die Deklaration vom Anfang der Seite
Hat jemand dieses Problem? Um IE7 kümmere ich mich nicht wirklich...
und was ist das?
@font-face
{
font-family: "MyFont";
src
url("programebi/acadnu_font/Seogut.ttf") format("truetype"), /* Safari, Android, iOS */
url("programebi/acadnu_font/Seogut.eot?") format("eot"), /* IE9 Compat Modes */
url("programebi/acadnu_font/Seogut.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("programebi/acadnu_font/Seogut.otf") format("opentype"); /* alle anderen nehmen das */
url("programebi/acadnu_font/Seogut.woff") format("woff"), /* Moderne Browser */
url("programebi/acadnu_font/Seogut.svg") format("svg"); /* Legacy iOS */
}
Danke für den Rat.
Ich habe den Artikel befolgt, alles funktioniert gut, aber ich habe eine hebräische Schriftart, englische Zeichen werden richtig angezeigt, aber hebräische Zeichen werden nicht gerendert, das Problem besteht nur in Chrome, Mozilla und IE zeigen es perfekt an. Weiß nicht, was ich tun soll, ich habe irgendwo gelesen, dass man die Reihenfolge ändern und SVG am Anfang setzen soll, aber es hat nicht funktioniert.
Ich entwerfe ein neues Webprojekt und werde Icon-Schriftarten für Symbole auf meinen Seiten verwenden.
Die von Ihnen vorgeschlagene Kombination ist die übliche. Aber bei Verwendung dieser Kombination erhalte ich nicht-anti-aliased Schriftarten in den meisten Browsern (ich teste meinen Code immer mit Chrome, Safari, Opera, IE 7-10 und FF), also habe ich die Kombination geändert und geändert, und hier ist die, mit der ich zufrieden bin.
Jetzt sehe ich nur noch niedrigqualitative Symbole in den IE 7- und 8-Modi, und alle anderen Browser rendern die Schriftarten wirklich gut, als wären es PNG-Bilder. Und wie Sie sehen können, verwende ich nicht einmal
url('fonts/Icon-Font.eot?#iefix') format('embedded-opentype')und es funktioniert trotzdem!Es mag Unterschiede zwischen Icon-Schriftarten und normalen Schriftarten geben, und ich werde jeden informieren, sobald ich bei der Schriftauswahl meines Webdesigns angelangt bin, aber vorerst mag das für jemanden nützlich sein.
Ich muss auch erwähnen, dass ich serverseitig GZip-Kompression für SVG-Dateien durchführe und die Größe dadurch so gering wird wie bei TTF- und EOT-Dateien.
PS: Ich verwende Windows 8 (IE 7 bis 10 mit Browser-Modi) und Mac OS X 10.8 für das Entwerfen, Codieren und Testen meiner Webprojekte.
OK, für die normalen Schriftarten habe ich diese Kombination zur besseren Darstellung der Schriftarten.
Ich habe das SVG extrahiert, da Nicht-englische Zeichen, einschließlich Persisch, Arabisch, Hebräisch usw., nicht funktionieren, wenn SVG-Schriftarten verwendet werden. Mit dieser Kombination habe ich die beste und glatteste Darstellung in IE 7-10, FF, Chrome, Safari und Opera erzielt.
Bitte beachten Sie, dass ich die IE 10 von Windows 8 in verschiedenen Modi verwende, um IE 7-10 zu testen. Bitte lassen Sie mich wissen, wenn ich etwas übersehe.
Ich hoffe, das hilft Ihnen allen.
Ich habe kürzlich ein Abonnement für H&FJ Cloud Typography abgeschlossen und versuche herauszufinden, wie ich @font-face damit verwenden kann. Ich möchte Gotham’s Book- und Bold-Schriftstärken verwenden. Alles, was ich bisher getan habe, ist, einen CSS-Link von H&FJ in den Kopfbereich einzufügen und dann einfach die normale Deklaration von font-family, font-weight und font-style in meine Stylesheets einzufügen. Ich habe nicht alle verschiedenen Schriftformate, die ich deklarieren muss.
Ich scheine auf dieses Problem gestoßen zu sein, dass IE8 und älter meine @font-face-Deklarationen nicht rendern.
Ich habe buchstäblich alle Lösungen ausprobiert, die ich online finden konnte, wenn andere auf das Problem gestoßen sind, und jetzt gehen mir ziemlich die Ideen aus.
Ich habe das Problem auf unserer Live-Holding-Seite: http://www.twdg.co.uk (das ist kein Link-Drop, das ist ein echtes Problem, das ich von einem zweiten Paar Augen betrachten lassen muss). Die Holding-Seite ist nicht so wichtig, aber ich muss sie lösen, da ich gerade an unserer neuen Website arbeite.
Vielen Dank im Voraus.
Als Antwort auf mein eigenes Problem hatte ich endlich den Verstand, die Konsole in den IE-Entwicklertools zu öffnen und sah die folgende Fehlermeldung "css3111: @font-face hat einen unbekannten Fehler festgestellt" bezüglich der .eot-Schriftarten. Nach einigen ersten Recherchen scheint dieser Fehler mit einem Problem der Schriftartendatei zusammenzuhängen, möglicherweise nicht korrekt generiert oder ein Fehler bei der Übereinstimmung von Schriftartnamen und Dateinamen. Sobald ich tiefer grabe und es behebe, werde ich es teilen.
Okay, ich habe es heute endlich geschafft, das zu beheben.
Dieser Artikel hat geholfen: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/
Im Grunde hatte die Originaldatei, mit der die .eot-Schriftarten generiert wurden, eine fehlerhafte Übereinstimmung innerhalb der tatsächlichen Schriftart selbst. Also habe ich Fontforge verwendet, um den Familiennamen, den Schriftartnamen und den Namen für Menschen der Schriftartendateien abzugleichen. Habe die Schriftart neu generiert und jetzt sind meine .eot-Dateien repariert und funktionieren in IE8 und IE7.
Liebe deine Seite/deinen Podcast, Chris! Ich habe gerade ein Set von Web-Schriftarten von einem Schriftartenanbieter erhalten und SVGZ-Dateien waren darin enthalten (sowie WOFF, TTF, EOT und SVG). SVGZ ist etwa ein Viertel so groß wie SVG. Welche Browser unterstützen sie/Wie kann ich sie verwenden? Danke!!
Weiß jemand über Probleme mit .woff- und .ttf-Schriftarten Bescheid? Es wird immer ein 404-Fehler angezeigt, obwohl ich die Schriftarten am richtigen Ort habe.
Meine Schriftfamilie funktioniert in IE 7 und 8 nicht, bitte helft mir.
Hilfe, mein Designer hat eine Zustimmung für ein Design erhalten, das Schriftarten aus drei verschiedenen Quellen verwendet
Googlefont
MyFonts (das die @fontface-Technik verwendet)
und http://www.typograpy.com (das sich auf Schriften aus einer einzigen Gießerei spezialisiert).
Weiß jemand, ob man alle drei Arten von Schriftarten in einer Webanwendung verwenden kann? Ich benutze Joomla, aber das ist nicht das eigentliche Problem.
Nur zur Information, Google Fonts verwendet auch @fontface…
und es gibt kein wirkliches Problem außer einer Menge Overhead.
Ich verwende Google Fonts auf meiner Website http://www.moreonfew.com und ich muss sagen, dass ich es wirklich mag. Es lädt nicht nur schneller, sondern bietet auch eine gute Auswahl an Schriftarten.
Aber Google Fonts haben manchmal ältere Versionen der Schriftarten und sie werden dadurch komisch gerendert.
@Greg Ledger
Wenn alle Schriftarten Lizenzen haben, die ihre Online-Nutzung erlauben, gibt es keinen Grund, warum Sie sie nicht verwenden können.
Gehen Sie zu FontSquirrel und prüfen Sie, ob sie bereits Schriftarten-Kits für die Schriftarten haben. Wenn ja, laden Sie sie herunter, verketten Sie die stylesheet.css-Dateien und Sie sind bereit.
Wenn Fontsquirrel noch kein Schriftarten-Kit hat, gehen Sie zum Web-Font-Generator, laden Sie die .ttf-Dateien hoch und er erstellt die Schriftarten-Kits für Sie.
Und ehrlich gesagt, wen kümmert es, ob Web-Schriftarten in IE8 und älter gerendert werden? Wenn Sie einen alten Browser verwenden, wissen Sie wahrscheinlich nicht einmal, dass es andere Schriftarten außer Times New Roman, Arial und Verdana gibt, und Sie werden all die anderen wunderbaren Dinge sowieso nicht sehen.
Ernsthaft, ich bin wirklich versucht, normalize.css für meine ieHacks.css-Datei zu verwenden. Vor allem mit Foundation.
Und vergessen Sie nicht, das zu tun
Wenn Ihre Schriftart fett ist. So können Sie die tatsächliche fette Schriftart anstelle von Browser-"Faux-Bold" verwenden und trotzdem fette Fallbacks haben.
Hallo zusammen,
Ich habe meine Website gerade fertiggestellt.
Ich habe die Schriftarten-Codes auf "Trajan Pro" gesetzt.
Auf meinem Macbook Pro und meinem Mac Desktop erscheint der Schriftstil, aber für andere scheint es eine Arial-Schriftart oder eine generische zu sein. Ich glaube, ich habe die Lösung mit diesem Code hier auf dieser Seite gefunden, bin mir aber nicht sicher, wie ich ihn einrichten soll. Wie zum Beispiel das Hochladen der Schriftart? Ich habe die Datei nicht, ich habe sie nur in den Code eingegeben. Wo platziere ich diesen Code dann in meinem HTML oder CSS?
Jeder Rat/Hilfe wäre sehr willkommen. Danke.
Wenn Sie @font-face verwenden, dann ist es immer CSS. Und wie bei CSS können Sie es entweder in einer HTML- oder CSS-Datei platzieren, aber die Platzierung in HTML macht keinen wirklichen Sinn, denn wenn die CSS-Datei schneller geladen wird als Ihr HTML (was etwas lustig ist, aber ich schätze, das kann passieren), wird @font-face möglicherweise nicht geladen, also als Antwort auf Ihre Frage – platzieren Sie @font-face am ANFANG Ihrer CSS-Datei. Gehen Sie zu Fontsquirrel, laden Sie WebTypeKit mit Ihren Schriftarten herunter und lesen Sie die Anleitung, die darin enthalten ist: How_to_use_webfonts.html. Ich hoffe, das hilft ein wenig. :)
Was ist mit der Verwendung einer Base64-Version der Schriftart und dem Ausschluss aller anderen Versionen? Ist das optimal/praktisch?
Base64-Kodierung funktioniert für mich. Ich habe es mit EOT und WOFF ausprobiert.
Ich habe festgestellt, dass bei der Verwendung von benutzerdefinierten Schriftarten mit @font-face Unterschiede in der Art und Weise bestehen, wie jeder Browser sie rendert. Die Ränder und Abstände sind zwischen Chrome und FF immer unterschiedlich. Chrome und Opera sind gleich, aber FF und IE erfordern beide einige Anpassungen, um die Konsistenz zu wahren. Zum Beispiel ist der Zeichenabstand immer unterschiedlich zwischen Chrome, FF und IE. Ich greife zum Browser-Sniffing und passe die Schriftarten dann individuell an.
Das funktioniert, aber offensichtlich ist Browser-Sniffing, besonders auf diese Weise, überhaupt nicht effizient. Es gibt jedoch sehr seltsame Unterschiede.
Irgendwelche Gedanken? Ist jemandem das schon mal aufgefallen?
Wäre es nicht sinnvoller, einfach browser-spezifische Präfixe in die CSS-Datei einzufügen?
Ja, das wäre viel sinnvoller, das werde ich tun. Ich wusste nicht, dass man das kann. Ich habe die Vendor-Präfixe für Keyframes und so etwas verwendet, aber ich wusste nicht, dass sie auf die Schriftartpositionierung angewendet werden können. Danke für die Antwort.
Ich habe alle Schriftarten verwendet, aber nur eine Zeile WOFF
src:url(../fonts/Simple-Line-Icons.woff) format(‘woff’);
funktionierte für mich ... danke
Font Face funktioniert nicht in IE9 und älter, bitte beraten Sie uns.
Wenn Sie eine Lösung für IE9 und älter haben.
Doch, tut es ;)
Schlagen Sie uns vor, wie.
Sie verwenden den in diesem Snippet bereitgestellten Code. Wenn er für Sie in IE 9 nicht funktioniert, schlage ich vor, ein reduziertes Testbeispiel zu erstellen und es in den Foren zu posten.
Ich verwende die WOFF-URL, und diese wird korrekt auf meiner Homepage geladen... aber wenn ich zu einer anderen Seite meiner Website gehe, wird die Schriftart wieder auf die Standardeinstellung zurückgesetzt...
Irgendwelche Ideen, warum das passieren könnte?
Die Schriftart wird nicht von einem anderen CSS-Stylesheet überschrieben.
Prost!
Habe das zum Laufen gebracht, indem ich HTTPS und HTTP als separate Schriftfamilien deklariert habe.
Bitte aktualisieren Sie das Snippet mit dem WOFF2-Format.
Beispiel
Bei jedem Code wäre es besser, wenn es ein Beispiel gäbe, um es besser zu verstehen.
Hallo Leute, habt ihr einen Trick, um schnell zu sehen, **welche der Quellen** vom Browser verwendet wird. Schriftarten funktionieren, aber ich kann nicht sagen, ob mein Browser WOFF, TTF oder sogar die SVG-Datei verwendet.
Es ist im Schriftarten-Panel in Firefox ziemlich offensichtlich, aber ich suche nach einer Möglichkeit, das in den Chrome-Entwicklertools zu sehen.
Irgendwelche Ideen?
@xavhan, benutze die Entwicklertools und schau dir den Netzwerkbereich an (Dateien, die der Browser herunterlädt), scheint für mich okay zu funktionieren. Ich bin mir keiner anderen Methode bewusst, aber vielleicht gibt es eine.
Die Verwendung des obigen CSS funktioniert auf allen von mir getesteten PCs und Browsern, aber nicht auf Android mit dem neuesten Chrome5 (39.xyz), auch nach Einbeziehung der WOFF2-Datei und Referenz.
Danke für die Zusammenstellung dieser CSS-Vorlagen und die Diskussion der Auswirkungen.
Ich verwende diese Vorlagen zur Generierung von CSS-Snippets im google-webfonts-helper-Dienst zum einfachen Herunterladen von Google-Web-Schriftarten in allen Formaten (
woff,woff2,svg,ttfundeot-Dateien) und zum Selbst-Hosting.Einige Schriftartdateien sind wirklich groß. Obwohl sie den Designs Schönheit verleihen, können sie die Ladezeit der Seite erheblich verlängern und sich daher auf die Suchmaschinenrankings auswirken und die Anzahl der wiederkehrenden Besucher Ihrer Website verringern. Während einige Benutzer keine erweiterten Sprachparameter wie Kyrillisch, Arabisch usw. verwenden müssen, muss ich sie beispielsweise verwenden. Und das verdoppelt fast die Dateigröße der Schriftart. Aus diesem Grund erinnere ich mich, dass ich auf einigen meiner Seiten Standard-Schriftarten wie Arial, Tahoma verwenden musste, obwohl ich neue moderne Schriftarten verwenden wollte.
Es wäre großartig, wenn irgendwann im Web alle Schriftartdateien zu einer einzigen eindeutigen Schriftartdatei zusammengefügt werden könnten, die für alle Betriebssysteme und Geräte lesbar ist. Damit wird die Ladezeit der Seiten beschleunigt und somit das Benutzererlebnis verbessert.
Nun, das zu sagen ist einfach, ob es wahr wird (sollte es!!), werden wir in Zukunft sehen.
Die Verwendung des obigen CSS funktioniert auf allen von mir getesteten PCs und Browsern, aber nicht auf Android mit dem neuesten Chrome5 (39.xyz), auch nach Einbeziehung der WOFF2-Datei und Referenz.
Wirklich eine furchtbare Anfängerfrage hier. Wie wird der Link zur Schriftartdatei für die folgenden beiden behandelt
url(‘webfont.svg#svgFontName’) – Ändert sich der Teil #svgFontName zu #svgMyAwesomeFont oder #MyAwesomeFont? Auf einer anderen Anmerkung, was ist mit dem #SomeText, das nach dem eigentlichen Link zur Schriftartdatei kommt?
Ähnliche Frage mit url(‘webfont.eot?#iefix’) – Wird das ?#iefix nach dem Link zur Schriftartdatei eingefügt und warum?
Der Vorteil vieler webbasierter @font-face-Generatoren ist, dass sie tatsächlich viel Verarbeitung durchführen (wie das Entfernen von Sonderzeichen aus Schriftartnamen, das Generieren von korrektem CSS usw.), um sicherzustellen, dass die generierte @font-face-Schriftart in einer breiten Palette von Browsern funktioniert. Abgesehen von Font Squirrel, das hier erwähnt wird, leistet everythingfonts als @font-face-Generator ebenfalls gute Arbeit: https://everythingfonts.com/font-face.
Der Nachteil bei den Webfont-Generatoren ist jedoch, dass sie, da sie den Schriftartnamen ändern, mit vielen Schriftartlizenzen inkompatibel sind.
Micah (2009) sechs Jahre später, genau richtig!
http://blog.fonts.com/2013/01/opentype-feature-support-now-possible-in-nearly-any-browser/
Hallo. Ich glaube, Sie haben einen Tippfehler in Ihrem zweiten Code-Snippet.
aktuell
url(‘myfont2.woff’) format(‘woff2’)
sollte sein
url(‘myfont.woff2’) format(‘woff2’)
Sie haben absolut Recht. Danke, korrigiert!
Ich habe einen sehr interessanten Vortrag von Ilya Grigorik auf der HTML5DevConf letztes Jahr gesehen, „Making Web Fonts Fast(er)“. Die wertvollste Erkenntnis war, dass wenn Sie eine häufig verwendete Schriftart auf Google Fonts verwenden und den HTML-Head-Link nutzen, die Wahrscheinlichkeit hoch ist, dass diese Schriftart bereits im Browser des Benutzers zwischengespeichert ist. Dann ist die Ladezeit für beliebtere Schriftarten geringer. Früher wollte ich einzigartigere Schriftarten verwenden und habe meine Entwicklungspraktiken seitdem geändert. Ich dachte nur, ich gebe diese Information weiter.
Korrekturen
Praktisch […]: Opera 27+ sollte Opera 11.50+ sein.
Super Progressiv […]: Opera 10+ sollte 23+ sein.
Die Google-Schriftart-URLs sollten HTTPS verwenden.
Das ist behoben.
Scheint, als hätten Sie die letzte vorgeschlagene Option in meiner Liste vergessen?
Ich werde auf protokollrelative URLs umstellen...
Google selbst stellt es Ihnen zur Verfügung, wie es im Artikel stand, daher bin ich mir nicht sicher, ob sie es BEVORZUGEN, dass Sie KEIN HTTPS verwenden oder was auch immer. Aber da es beides funktioniert, denke ich, dass protokollrelative URLs der richtige Weg sind.
Wenn ich mich nicht irre, haben IE7+IE8 (insgesamt) immer noch eine Desktop-Browser-Marktdurchdringung von etwa 5 Prozent, was meiner Meinung nach viel zu viel ist, um sie zu vernachlässigen. Keine der hier vorgestellten @font-face-Lösungen funktioniert für Browser vor IE9. Was ist mit denen?
Hans, das allererste Beispiel beinhaltet die Unterstützung für IE6-8.
Oder wenn Sie @import bevorzugen, ist die Syntax von Google die richtige. Sie nimmt Ihre Anfrage entgegen und antwortet mit dem entsprechenden @font-face für den anfragenden Browser.
Danke, Peter. Anfangs habe ich es in dieser sehr langen Diskussion übersehen.
Frage zur Verwendung von Media Queries zum Bereitstellen von System-Schriftarten anstelle von Web-Schriftarten. Lädt der Browser die Schriftarten nicht vor, unabhängig vom Viewport? Oder verwechsle ich das mit Bildern?
Die Situation mit Schriftarten ist immer noch lächerlich. Google hat die Web-Schriftarten kostenlos zur Verfügung gestellt, das ist nett. Jetzt sollten sie sie in die Standardinstallation der wichtigsten Betriebssysteme aufnehmen. Das würde dieser albernen Charade ein Ende setzen.
Sie meinen *alle* davon? Im Jahr 2022 gibt es über tausend (ohne die mehrfachen Variationen für jede einzelne)...
Ich verwende eine Schriftart namens FSDillonWeb-Regular, aber das Problem ist, dass ich keine TTF-Datei habe und dies ein PHP-Projekt ist und die Schriftarten sich in C:\xampp\htdocs\falcon-crm.eoe_staging\wp-content\themes\eoe befinden.
Ich habe den Pfad in CSS angegeben;
@font-face {
font-family: FSDillonWeb-Medium;
src: url(‘fonts/FSDillonWeb-Medium.woff’);
font-weight: 500;
}
Schriftarten funktionieren nicht und ich gerate bei diesem Projekt in Verzug. Kann mir jemand helfen.
Ich bin mir nicht sicher, ob das das Problem ist, aber Sie sagten, Sie würden eine Schriftart namens "FSDillonWeb-Regular" verwenden, aber trotzdem in CSS "FSDillonWeb-Medium" schreiben.
Betreff: „schnelle“ CDN-Schriftartdienste: NICHT! Könnte sein, außer dass alle CDN-Dienste neben der Schwierigkeit, Schriftartendienst-Skripte zu kompilieren, auch den Quellcode der Schriftartdateien schützen. Alle von Ihnen aufgelisteten Schriftartdienste mit der einzigen Ausnahme von Google sind monolitische Träglinge unter der heißen Sonne. Verwenden Sie Google für die beste Geschwindigkeit in den meisten Fällen, und ansonsten ist dies ein großartiger @fontface-Artikel.
PS: Shawn hat eine gute Idee bezüglich Google Web Fonts, die in Betriebssysteme aufgenommen werden sollen, außer… Kartellrechtsverletzungen und andere Handelsverstöße sind bei Google in Europa jetzt so üblich, dass die Aufnahme seiner Schriftarten in einen Computer bald so tödlich effizient sein wird wie die Nutzung bezahlter „geheimer“ Schriftartdienste, die festgefahrene CDN-Computer. Kein Witz.
Wie kommt es, dass der W3validator den Link zu Google WF als ungültig betrachtet, wenn mehr als eine Schriftart verwendet wird? http://c2n.me/3maRyeA.jpg
Könnten Sie uns bitte einen Blick darauf gewähren.
Ich muss entweder die Meinung von W3v ignorieren oder etwas Zeit aufwenden, um sie zu beheben, indem ich sie in zwei Codezeilen aufteile.
Ist Google sich dessen nicht bewusst?
Ich weiß, dass dieser Kommentar etwas alt ist, aber Sie können das Pipe-Zeichen in die Unicode-Version %7C umwandeln.
Ich habe gerade versucht, die .otf-Schriftart im OpenType-Format zu verwenden, und es scheint überall zu funktionieren.
Gibt es einen Grund, warum ich das NICHT tun und stattdessen die 6 Geschmacksrichtungen von Schriftarterweiterungen, also: woff2, woff, eot usw. usw. wählen sollte?
Hallo,
Glaubst du, dass es inzwischen ausreicht, nur WOFF zu verwenden?
Außerdem habe ich einige SVGs als Bilder auf meiner Website eingebettet, und die Schriftart, die darin verwendet wird, kann nur von Computern angezeigt werden, auf denen diese Schriftart installiert ist, obwohl ich die SVG-Datei in meiner @fontface-Regel habe... weiß jemand, wie man das beheben kann?
Danke!
Habe mit einigen der in diesem Artikel genannten Optionen herumgespielt
Ist es möglich, dass Google Web Fonts *nur* .woff oder .woff2 in ihren @font-face-Familien verwendet? Das würde bedeuten, dass andere Schriftarterweiterungen über diese Technik nicht unterstützt werden.
Ich habe dem Link über der Erwähnung „Ein Vorteil der Nutzung eines gehosteten Dienstes ist, dass er wahrscheinlich alle Schriftartendateivarianten enthält, was eine tiefgreifende Cross-Browser-Kompatibilität gewährleistet, ohne dass wir all diese Dateien selbst hosten müssen.“ angeklickt und keine Vielfalt an Dateierweiterungen gefunden.
Ich habe inzwischen die gewünschte Google-Schriftart heruntergeladen, alle Formate mit Web-Tools konvertiert und diese Dateien lokal auf dem Server.
Wenn Sie versuchen, sich anzusehen, was Google Ihnen liefert, bedenken Sie, dass sie möglicherweise (und wahrscheinlich) serverseitige UA-Sniffing durchführen, um zu sehen, was Sie benötigen, und nur diesen Code liefern.
Sehr geehrte Damen und Herren,
Ich arbeite unter Win 8, verwende diesen Code. Er funktioniert für IE und FF, Opera usw.
Was ich verstanden habe, ist: WOFF-Schriftarten sind leicht und üblich bei Google Fonts.
Hallo zusammen,
Ich habe eine benutzerdefinierte Schriftart zu meiner Website über Squarespace hinzugefügt, aber sie funktioniert nicht. Sie funktionierte bis etwa Anfang August 2016 in Chrome und Firefox (das Timing kann abweichen), aber jetzt funktioniert sie nicht mehr. Die CSS-Schriftart funktioniert in Safari und in Chrome auf meinem iPhone, aber nicht auf dem Laptop. Weiß jemand, was das Problem ist? Ich habe die Schriftarten mit dem Ordner „Benutzerdefinierte Dateien verwalten“ in Squarespace verknüpft.
Wie kann ich Font Face als Inline-CSS anwenden?
Vielen Dank für diesen Artikel. Ich habe nach der Bedeutung gesucht, warum ich verschiedene Schriftartenformate verwenden sollte, da einige der Formate eine viel größere Dateigröße haben als WOFF.
Ist es möglich, mehr als eine Schriftart in Font Face anzugeben, und wenn ja, wie?
Ich bin mir nicht sicher, ob mir jemand hier helfen kann. Ich habe das Gefühl, ich habe jetzt alles versucht, um den Cache in Chrome zu leeren, nachdem ich die Schriftart geändert habe, und sie lädt einfach nicht die neue. Safari hatte anfangs dasselbe Problem, aber Safari hat es mir erlaubt, es in Sekundenschnelle mit dem Entwicklermenü zu beheben. Deaktivieren und Leeren des Caches ermöglichte es mir, es in Echtzeit zu sehen. Ich habe den Cache in Chrome jetzt 1000 Mal geleert und immer noch lädt er das alte Set. Ich weiß, dass dies in den Chrome-Support gehört, aber hey, vielleicht kennt hier jemand, weil es mit der Verwendung von @font-face zusammenhängt, die Lösung und hatte dasselbe Problem. Deshalb versuche ich hier nur mein Glück.
Schon gut, Problem gelöst. Mein Problem war, dass Chrome sich nicht allein auf die SVG-Datei verlassen kann, wie es Safari kann. Chrome benötigt, wie andere Browser auch (getestet mit Firefox und Opera), alle verfügbaren Schriftarten wie EOT, TTF, WOFF usw. Ich hoffte, ich könnte die SVG-Datei einfach so verwenden, aufgrund einer Einschränkung, dass ich auf diesem speziellen Server keine echten Schriftarttypen hochladen kann.
Hallo, bitte ich brauche eine schnelle Lösung. Ich möchte eine Rohschriftart auf meiner Website verwenden, es ist eine .ttf-Datei. Wie kann ich das tun?
Vielen Dank
Ich bette Linux Libertine und Linux Biolinum ein. Ich sehe in fast allen Kommentaren hier, dass die Leute mehr als ein src+url in einer font-face-Deklaration einfügen. In den Beispielen, die ich anderswo für Linux Libertine/Biolinum gesehen habe, gab es eine separate font-face-Deklaration für *jede* WOFF-Datei, wobei die Schriftartstile vermutlich als „Gatekeeper“ für jede WOFF fungierten. Gibt es eine beste Praxis? Ist nur *eine* Deklaration effizienter und schneller zu laden? Sind Browser intelligent genug, um das richtige Rendering zu ermitteln?
(Zur Klarstellung: *Jede* Libertine und Biolinum besteht aus *mehreren* WOFFs: regulär, kursiv, fett usw. So lande ich bei 9 font-faace-Deklarationen!)
Können wir @font-face in iOS-Apps verwenden, um lokale Schriftartdateien in die App zu laden, so wie ich FontAwesome verwenden möchte, aber @font-face funktioniert nicht, es funktioniert, wenn ich es verwende.
Kann mir jemand helfen? Meine benutzerdefinierten Schriftarten funktionieren einwandfrei im Backend von WordPress, werden aber im Frontend nicht geladen??
Ich habe etwas in PHP gemacht, um externe Schriftarten zu laden und die Web-Performance zu verbessern. Vielleicht ist es nützlich.
https://github.com/RickyIta68/font-performance-control
https://www.phpclasses.org/package/10839-PHP-Optimize-the-load-of-page-fonts-embedding-into-CSS.html
Dieser Artikel war sehr hilfreich für mich, aber ich habe einen kleinen Vorschlag: Wenn Sie über die Einschränkung des Zeichensatzes sprechen, sollten Sie erwähnen, dass dies bei einigen Open-Source-Schriftartlizenzen problematisch sein kann. Zum Beispiel betrachtet die OFL Subsetting oder Optimierung als Modifikation, daher kann die Durchführung ohne Änderung von reservierten Schriftartnamen gegen die Lizenz verstoßen. Dieses Problem wird hier diskutiert: https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web_fonts_and_RFNs
Vielen Dank! Das hat mir Stunden Arbeit erspart, die ich sonst selbst mit der Suche nach einer Lösung verbracht hätte. :)
WOFF2-Unterstützung ist jetzt weiter verbreitet. IE11 unterstützt es nicht, ebenso wenig wie Safari auf El Capitan und älter oder Opera Mini. Abgesehen davon ist es ein reibungsloser Weg!
https://caniuse.com/woff2
Hallo, können wir mehrere Schriftstile so verwenden?
Und ist ihre Reihenfolge wichtig, und wenn ja, was ist die richtige Reihenfolge?
Danke..
Ich kann die Antwort auf meine Frage nicht finden, vielleicht können Sie mir helfen.
Funktioniert link rel = "preload" mit @font-face?
Es ist unmöglich, eine Schriftart ohne ein Link-Tag vorzuladen, funktioniert dieses Tag im Paar mit dieser Regel?
Kommentar korrigiert.
Und ich versuche es erneut, nutzte für diese Lösung,
Oder nicht @font-face eines SVG von
Ich schreibe kein CSS in command-line.css.
@counter-style ist nicht gut.
Ich verwende Google-Schriftarten auf meiner Website https://itsmycode.com Das Hauptproblem ist jedoch die Seitenleistung. Die jüngsten Änderungen an Google Pagespeed beeinträchtigen externe Schriftarten und CSS stark. Ich habe die Schriftarten zumindest lokal heruntergeladen und versuche, sie zu verwenden.
Gibt es eine Möglichkeit, sie zu optimieren und besser zu servieren? Etwas wie ein asynchrones Laden für WordPress-Sites?
Tatsächlich verwende ich Google Font (Varela Round) auf meiner Website https://codingdiksha.com Das Problem ist, dass der Google Page Speed Test anzeigt, dass ich die Schriftarten vorladen muss. Ich weiß nicht, wie ich das machen soll. Können Sie mir helfen, die Google-Schriftarten vorzuladen?
Hier ist ein nützlicher kleiner Ausschnitt, der Ihnen helfen wird: https://css-tricks.de/the-fastest-google-fonts/
Obwohl ich Google Fonts *meistens* für alles verwende, gibt es einige Sonderfälle, in denen ich keine Wahl habe, als eine Schriftart selbst zu hosten.
Ich frage mich, ob man tatsächlich einige Geschwindigkeitsverbesserungen erzielen kann, wenn man solche selbst gehosteten Schriftarten rendert (gemessen von Google Page Speed Test, YSlow usw.), indem man dieselben Tricks anwendet, die in diesem Artikel (und den damit verknüpften verwandten Artikeln) beschrieben werden.
Haben schon Leute solche Experimente mit selbst gehosteten Schriftarten durchgeführt?
Langsame Netzwerkverbindung und aus diesen Gründen würde Chrome bei der @font-face CSS-Regel eine Fallback-Schriftart anzeigen.
Aber ich habe ein paar Lösungen gefunden und verwende sie auch auf meiner Website kodlogs.net
Diese Lösungen habe ich hier zusammengestellt.
Ich plane, Google Noto Fonts auf meiner Website zu verwenden
Es unterstützt viele Sprachen (800+) und der Plan ist, die Website in verschiedene Sprachen zu lokalisieren.
Ich habe bemerkt, dass einige der Schriftgrößen sehr groß sind, tatsächlich über 20 MB+ und die Varianten sind wieder groß. Gibt es eine Möglichkeit, dies zu optimieren? Ich finde, dass das Laden von über 30 MB Schriftgröße wirklich schlecht für die Leistung der Webseite ist.
Sollte ich die Schriftarten herunterladen und etwas wie unten verwenden?
oder einfach den Google-Link direkt als Stylesheet konfigurieren