Der folgende Code funktioniert sowohl in Google Chrome Beta als auch in IE 7. Firefox scheint jedoch ein Problem damit zu haben. Ich vermute, dass es sich um ein Problem handelt, wie meine CSS-Dateien enthalten sind, da ich weiß, dass Firefox domänenübergreifende Importe nicht besonders unterstützt.
Aber das ist alles nur statisches HTML und es gibt keine Frage von domänenübergreifendem.
Auf meiner Landing-Page.html mache ich einen CSS-Import wie folgt:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Innerhalb der main.css habe ich noch andere Importe wie folgt:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
und innerhalb der type.css habe ich folgende deklarationen:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
Ich habe ein Verzeichnis namens "font" am selben Speicherort wie type.css. Dieses Schriftverzeichnis enthält alle woff / ttf / svg-Dateien usw.
Ich bin in diesem Fall ratlos. Es funktioniert in Chrome und IE, aber nicht in Firefox . Wie ist das möglich? Was vermisse ich?
<style>
Tags zu Ihrem HTML-Code hinzuzufügen, um festzustellen, ob Sie das gleiche Problem haben?Antworten:
LOKAL LAUFEN DER WEBSITE (
file:///
)Firefox
file:///
wird standardmäßig mit einer sehr strengen "file uri origin" ( ) -Richtlinie geliefert: Damit es sich wie andere Browser verhält, gehen Sie zuabout:config
, filtern Sie nachfileuri
und schalten Sie die folgenden Einstellungen um:security.fileuri.strict_origin_policy
Setzen Sie es auf false und Sie sollten in der Lage sein, lokale Schriftartenressourcen über verschiedene Pfadebenen zu laden.
VERÖFFENTLICHTE WEBSITE
Gemäß meinem Kommentar unten und wenn dieses Problem nach der Bereitstellung Ihrer Site auftritt, können Sie versuchen, einen zusätzlichen Header hinzuzufügen, um festzustellen, ob sich Ihr Problem als domänenübergreifendes Problem konfiguriert: Dies sollte nicht der Fall sein, da Sie relative Pfade angeben. aber ich würde es trotzdem versuchen: Geben Sie in Ihrer .htaccess-Datei an, dass Sie für jede angeforderte .ttf / .otf / .eot-Datei einen zusätzlichen Header senden möchten:
Ehrlich gesagt würde ich nicht erwarten, dass es einen Unterschied macht, aber es ist so einfach, dass es sich lohnt, es zu versuchen: Andernfalls versuchen Sie, die Base64-Codierung zu verwenden für Ihre Schriftart zu verwenden, hässlich, aber es funktioniert möglicherweise auch.
Eine schöne Zusammenfassung finden Sie hier
quelle
Zusätzlich zum Hinzufügen von Folgendem zu Ihrem .htaccess: (danke @Manuel)
Möglicherweise möchten Sie versuchen, die Webfont-MIME-Typen explizit zur .htaccess-Datei hinzuzufügen ... wie folgt:
Am Ende sieht meine .htaccess-Datei so aus (für den Abschnitt, in dem Webfonts in allen Browsern funktionieren können).
quelle
Ich hatte auch dieses Problem. Ich habe die Antwort hier gefunden: http://www.dynamicdrive.com/forums/showthread.php?t=63628
Dies ist ein Beispiel für die Lösung, die unter Firefox funktioniert. Sie müssen diese Zeile zu Ihrem CSS für Schriftarten hinzufügen:
quelle
local('name')
in diefont-face
Deklaration bedeutet nur "Versuchen Sie, den Namen der Schriftart auf den Computer des Benutzers zu laden. Wenn er nicht gefunden wird, laden Sie die Webschrift." (Siehe die MDN-Dokumente ). Trotzdem froh, dass es bei Ihnen funktioniert hat! :)Ich lasse dies einfach hier, weil mein Kollege eine Lösung für ein verwandtes Problem gefunden hat: "Schriftart funktioniert nicht mit Firefox, sondern überall sonst".
Das Problem war nur, dass Firefox die Deklaration der Schriftfamilie durcheinander gebracht hat. Dies hat das Problem behoben:
PS: Ich habe auch html5boilerplate verwendet.
quelle
Ich hatte das gleiche Problem. Überprüfen Sie Ihren Code mit der Regel @ font-face auf H1, H2 oder einen anderen Stil, auf den Sie abzielen. Ich stellte fest, dass mir ein Koma fehlte, nachdem
font-family: 'custom-font-family' Arial, Helvetica etc
es in jedem Browser außer Firefox einwandfrei angezeigt wurde. Ich habe das Koma hinzugefügt und es hat funktioniert.quelle
Ich hatte genau das gleiche Problem. Ich musste einen neuen Ordner namens "fonts" erstellen und in wp_content ablegen. Ich kann über meinen Browser wie folgt darauf zugreifen: http://www.example.com/wp-content/fonts/CANDY.otf
Zuvor befand sich der Ordner "fonts" im selben Verzeichnis wie meine CSS-Datei, und das @ font-face sah folgendermaßen aus:
Wie oben erwähnt, funktionierte dies nicht in Firefox, sondern nur mit Chrome. Jetzt funktioniert es, weil ich einen absoluten Pfad verwendet habe:
quelle
Ich hatte genau dieses Problem mit ff4 auf einem Mac. Ich hatte einen lokalen Entwicklungsserver ausgeführt und meine @ font-face-Deklaration funktionierte einwandfrei. Ich bin zu Live migriert und FF hat beim Laden der ersten Seite den richtigen Typ "geflasht", aber wenn ich tiefer navigiere, wird standardmäßig das Browser-Stylesheet verwendet.
Ich fand die Lösung darin, die folgende Deklaration zu .htaccess hinzuzufügen
gefunden über
quelle
Eine einfache Lösung, die noch niemand erwähnt hat, ist das direkte Einbetten der Schriftart in die CSS-Datei mithilfe der Base64-Codierung.
Wenn Sie fontsquirrel.com verwenden, wählen Sie im Font-Face Kit Generator den Expertenmodus , scrollen Sie nach unten und wählen Sie unter CSS-Optionen Base64-Code aus Das heruntergeladene Font-Kit kann jetzt per Plug-and-Play .
Dies hat auch den Nebeneffekt, dass die Ladezeit der Seite reduziert wird, da eine http-Anforderung weniger erforderlich ist.
quelle
Ich würde erwähnen, dass einige Schriftarten Probleme in Firefox haben, wenn ihr Dateiname bestimmte Zeichen enthält. Ich bin kürzlich auf ein Problem mit der Schriftart 'Modulus' gestoßen, die den Dateinamen '237D7B_0_0' hatte. Das Entfernen der Unterstriche im Dateinamen und das Aktualisieren des CSS auf den neuen Dateinamen löste dieses Problem. Andere Schriftarten mit ähnlichen Zeichen haben dieses Problem nicht, was sehr merkwürdig ist ... wahrscheinlich ein Fehler in Firefox. Ich würde empfehlen, Dateinamen nur für alphanumerische Zeichen zu verwenden.
quelle
Insbesondere für diese Schriftart sollten Sie die Google Font API verwenden:
http://code.google.com/webfonts/family?family=Droid+Sans
Wenn Sie den Kit-Generator von FontSquirrel weiterhin verwenden möchten, verwenden Sie die Smiley-Hack-Option, um lokale Schriftprobleme zu beseitigen. Überprüfen Sie nach dem Generieren eines Kits, ob die generierte demo.html in FireFox funktioniert. Ich wette, das tut es. Laden Sie es jetzt auf Ihren Server hoch - ich wette, es funktioniert auch dort, da FontSquirrel fantastisch ist.
Wenn Sie jedoch den generierten Kit-Code während der Integration in Ihr Projekt beschädigt haben, verwenden Sie die Standard-Debugging-Methoden - suchen Sie nach 404 und gehen Sie Zeile für Zeile, bis Sie das Problem finden. WOFF sollte auf jeden Fall in FF funktionieren, das ist also ein guter Anfang.
Wenn nichts davon funktioniert, aktualisieren Sie FireFox. Ich habe das alles unter der Annahme geschrieben, dass Sie die neueste verwenden. Sie haben jedoch nicht angegeben, welche Version Sie einchecken, sodass dies auch Ihr Problem sein könnte.
quelle
Versuchen Sie, die lokale Quelldeklaration in Ihren
@font-face
Anweisungen zu verfeinern .Es gibt einen bekannten Fehler in Firefox oder der Google Font API, der verhindert, dass die Varianten von Schriftarten verwendet werden, wenn die Schrift lokal installiert wird und mit dem definierten lokalen Namen übereinstimmt:
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
Um die lokale Deklaration effektiv zu verfeinern, machen Sie einfach Ihre lokale Quellzeichenfolge zu einem Unsinn. Die allgemein akzeptierte Konvention hierfür ist die Verwendung eines Smiley-Unicode-Zeichens (
"☺"
). Warum? Paul Irish hat eine großartige Erklärung in seinem Blog:http://paulirish.com/2010/font-face-gotchas/#smiley
quelle
Testen Sie dies in lokalen Dateien oder außerhalb eines Webservers? Dateien in verschiedenen Verzeichnissen werden für domänenübergreifende Regeln als unterschiedliche Domänen betrachtet. Wenn Sie also lokal testen, können domänenübergreifende Einschränkungen auftreten.
Andernfalls wäre es wahrscheinlich hilfreich, auf eine URL zu verweisen, unter der das Problem auftritt.
Außerdem würde ich vorschlagen, in der Firefox-Fehlerkonsole nachzusehen, ob CSS-Syntaxfehler oder andere Fehler gemeldet werden.
Außerdem möchte ich darauf hinweisen, dass Sie wahrscheinlich eine Schriftgröße wünschen: fett in der zweiten @ font-face-Regel.
quelle
Die Verwendung der .htaccess-Zugriffssteuerungsregel "Origin zulassen" hat bei mir nicht funktioniert, als ich mit diesem Problem konfrontiert wurde.
Fügen Sie stattdessen in IIS in der Datei web.config den unten gezeigten Block system.webServer ein.
Das hat für mich wie ein Zauber gewirkt. Wenn Sie den Zugriff auf eine bestimmte Domain beschränken müssen, ersetzen Sie das * durch die Domain.
quelle
Ich hatte das gleiche Problem damit, dass eine Schriftart in Firefox richtig angezeigt wurde. Folgendes habe ich gefunden, um für mich zu arbeiten. Fügen Sie vor dem Verzeichnis, in dem sich die Schriftart im URL-Attribut befindet, einen Schrägstrich ein. Hier ist meine Vorher- und Nachher-Version:
Beachten Sie den führenden Schrägstrich vor "Schriftarten" in der URL? Dies weist den Browser an, im Stammverzeichnis zu beginnen und dann auf die Ressource zuzugreifen. Zumindest für mich - Problem gelöst.
quelle
Wenn Sie versuchen, externe Schriftarten zu importieren, tritt eines der häufigsten Probleme mit Ihrem Firefox und einem anderen Browser auf. Manchmal funktioniert Ihre Schriftart gut in Google Chrome oder einem der anderen Browser, aber nicht in jedem Browser.
Es gibt viele Gründe für diese Art von Fehler. Einer der Hauptgründe für dieses Problem ist die vorherige per-definierte Schriftart. Sie müssen das wichtige Schlüsselwort nach dem Ende jeder Zeile CSS-Code wie folgt hinzufügen:
Beispiel:
Beschreibung: Geben Sie hier den obigen Code in Ihre CSS-Datei oder Ihren Code ein. Im obigen Beispiel ersetzen Sie "Hacen Saudi Arabia" durch Ihre Schriftfamilie und ersetzen Sie die URL gemäß Ihrem Schriftverzeichnis.
Wenn Sie in Ihrem CSS-Code-Browser! Important eingeben, konzentrieren Sie sich automatisch auf diesen Abschnitt und überschreiben die zuvor verwendete Eigenschaft. Weitere Informationen finden Sie unter: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
quelle
Kannst du mit Firebug nachfragen, ob du 404 bekommst? Ich hatte Probleme im Pass und stellte fest, dass die Erweiterung dieselbe war, aber Linux file.ttf unterscheidet sich von file.TTF ... und es funktionierte mit allen Browsern außer Firefox.
Wünschte, es hilft!
quelle
Dies ist ein Problem bei der Einrichtung der Pfade Ihrer Schriftart. Da Sie den Pfad nicht mit einem "/" begonnen haben, versucht Firefox, die Schriftarten basierend auf dem Pfad zu finden, in dem sich das Stylesheet befindet. Im Grunde sucht Firefox Ihre Schriftart stattdessen im Verzeichnis "root / css / font" das Verzeichnis "root / font". Sie können dies einfach beheben, indem Sie entweder den Schriftartenordner in den CSS-Ordner verschieben oder am Anfang Ihrer Schriftpfade ein / hinzufügen.
Probieren Sie es aus:
quelle
Versuche dies....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
quelle
Ich hatte ein ähnliches Problem. Die fontsquirel-Demoseite funktionierte in FF, aber nicht auf meiner eigenen Seite, obwohl alle Dateien von derselben Domain stammten!
Es stellte sich heraus, dass ich mein Stylesheet mit einer absoluten URL (http://example.com/style.css) verknüpfte, sodass FF dachte, es stamme von einer anderen Domain. Das Ändern meines Stylesheet-Links href zu /style.css hat stattdessen Probleme für mich behoben.
quelle
Vielleicht ist Ihr Problem ein Namensproblem, insbesondere im Hinblick auf die Verwendung (oder nicht) von Leerzeichen und Bindestrichen.
Ich hatte ein ähnliches Problem, das ich durch Platzieren des optionalen Problems behoben hatte Anführungszeichen (') um Schrift- / Familiennamen setzte, aber das hat implizit ein Namensproblem behoben.
Ich bin in Bezug auf die CSS-Spezifikation nicht ganz auf dem neuesten Stand, und es gibt (zumindest für mich) einige Unklarheiten darüber, wie verschiedene Kunden die Spezifikationen interpretieren. Darüber hinaus scheint es auch mit PostScript-Namenskonventionen zu tun zu haben, aber bitte korrigieren Sie mich, wenn ich falsch liege!
Wie auch immer ich es jetzt verstehe, Ihre Erklärung verwendet eine Mischung aus zwei möglichen unterschiedlichen Geschmacksrichtungen.
Wenn Sie Droid als den tatsächlichen Familiennamen betrachten, zu dem Sans und Serif gehören, wie zum Beispiel ihre Kinder Sans Regular oder Serif Bold , verwenden Sie entweder überall Leerzeichen, um Bezeichner zu verknüpfen, oder Sie entfernen Leerzeichen und verwenden CamelCasing für den Familiennamen und Bindestriche für Unterkennungen.
Auf Ihre Erklärung angewendet würde es ungefähr so aussehen:
ODER
Ich denke, beide sollten vollkommen legal sein, entweder mit oder ohne die Zitate, aber ich hatte gemischten Erfolg damit zwischen verschiedenen Kunden. Vielleicht habe ich eines Tages etwas Zeit, um die Details zu diesem / diesen isseu / s herauszufinden.
Ich fand diesen Artikel hilfreich, um einige der Aspekte zu verstehen: http://mathiasbynens.be/notes/unquoted-font-family
Dieser Artikel enthält einige weitere Details zu PostScript und einige Links zu einem Adobe-Spezifikations-PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
quelle
Sie müssen nicht mit den Einstellungen herumspielen, sondern entfernen nur die Anführungszeichen und Leerzeichen aus der Schriftfamilie:
Dies
wird dies
quelle
In meinem Fall habe ich das Problem beim Einfügen von Code für Schriftarten behoben
Direkt im Header auf Ihrer index.html- oder PHP-Seite im Style-Tag. Funktioniert bei mir!
quelle
Aus diesem Grund ist dies eines der besten Google-Ergebnisse für dieses Problem. Ich möchte hinzufügen, was dieses Problem für mich gelöst hat:
Ich musste das Format (opentype) aus dem src der Schriftart entfernen, dann funktionierte es auch in Firefox. Davor hat es in Chrome und Safari gut funktioniert.
quelle
Möglicherweise liegt es nicht an Ihrem Code, sondern an Ihrer Firefox-Konfiguration.
Versuchen Sie dies von
Tool bar
Western bis Unicodequelle
Ich hatte das gleiche Problem und löste es durch Hinzufügen von Meta für Inhalte:
Dies geschieht in Firefox und Edge, wenn Sie Unicode-Texte in Ihrem HTML-Code haben.
quelle
Ich weiß nicht, wie Sie die Syntax erstellt haben, da ich nie svg in der Schriftdeklaration verwendet habe, aber Font Squirel hat ein wirklich gutes Werkzeug, um aus nur einer Schrift eine kugelsichere Syntax-Schrift zu erstellen.
http://www.fontsquirrel.com/fontface/generator
quelle
Könnte auch die Verwendung der URL im Pfad des Font-Face-Tags sein. Wenn Sie "http://domain.com" verwenden, funktioniert es in Firefox nicht. Für mich hat es funktioniert, es in "http://www.domain.com" zu ändern.
quelle
Mein Problem war, dass Windows die Schriftart 'font.TTF' nannte und Firefox 'font.ttf' erwartete. Ich sah, dass nach dem Öffnen meines Projekts unter Linux die Schriftart in den richtigen Namen umbenannt wurde und alles funktioniert
quelle