CSS @ font-face funktioniert nicht mit Firefox, sondern mit Chrome und IE

194

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?

Kaushik Gopal
quelle
2
Genau auf dieses Problem stoße ich derzeit mit von FontSquirrel generierten Direktiven und Schriftarten.
Jason
Können Sie zu Testzwecken versuchen, die @ font-face-Deklarationen zwischen <style>Tags zu Ihrem HTML-Code hinzuzufügen, um festzustellen, ob Sie das gleiche Problem haben?
Chris_O
Das Hinzufügen eines einzelnen Kommas kann dieses Problem ebenfalls lösen, z. B.: URL-Format ('Sans-Serif') ('Woff')
Farzan Balkani

Antworten:

234

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 zu about:config, filtern Sie nach fileuriund 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:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

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

Manuel
quelle
Wenn Sie nicht lokal arbeiten, wird dies wahrscheinlich nicht das Problem lösen. Möglicherweise möchten Sie jedoch trotzdem root-basierte Pfade auf einer Live-Site verwenden, dh "/ resources / font" anstelle von relativen Pfaden wie "../". font ", aber ich weiß nichts über thumblr: Wenn Sie die URL für die Site angeben können, kann ich sie mir ansehen.
Manuel
Die Schriftartdeklaration funktioniert in Chrome und Safari einwandfrei, auch wenn sie bis zum IE6 zurückreicht ... aber nicht Firefox.
Jason
3
Ah, Sie sprechen über das berüchtigte domänenübergreifende Problem: Sie können Ihre Schriftart entweder in einer Base64-Codierung verwenden oder thumblr bitten, beim Bereitstellen von Schriftarten einen zusätzlichen Header "Access-Control-Allow-Origin" hinzuzufügen.
Manuel
Wie lächerlich streng ist dann die domänenübergreifende Richtlinie von Firefox? Das CDN und die Site teilen sich dieselbe Domain, nur verschiedene Subdomains.
Jason
1
@ Jason, funktioniert die chaotische 64-Bit-Codierung auch nicht? Es hat bei mir funktioniert.
Kaushik Gopal
42

Zusätzlich zum Hinzufügen von Folgendem zu Ihrem .htaccess: (danke @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Möglicherweise möchten Sie versuchen, die Webfont-MIME-Typen explizit zur .htaccess-Datei hinzuzufügen ... wie folgt:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Am Ende sieht meine .htaccess-Datei so aus (für den Abschnitt, in dem Webfonts in allen Browsern funktionieren können).

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS
alademann
quelle
Hat auch für mich gearbeitet. Danke zoulodi!
James
Arbeite für mich wie ein Zauber! Vielen Dank
Moxet
1
Hat den Trick auch für mich gemacht. Ich musste auch woff2 hinzufügen: AddType font / woff2 .woff2
hdomos
17

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:

src: local(font name), url("font_name.ttf");
israelisch
quelle
3
Das Einfügen eines local('name')in die font-faceDeklaration 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! :)
Henry
4
Es funktionierte "Für Sie", weil Sie die Schriftart auf Ihrem Computer installiert hatten. Andere Benutzer werden es nicht sehen. Du hast es nur für dich repariert.
Hugo Delsing
4

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:

body{ font-family:"MyFont" !important; }

PS: Ich habe auch html5boilerplate verwendet.

Ruyadorno
quelle
4

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 etces in jedem Browser außer Firefox einwandfrei angezeigt wurde. Ich habe das Koma hinzugefügt und es hat funktioniert.

Tarquinwinot
quelle
4

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:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Wie oben erwähnt, funktionierte dies nicht in Firefox, sondern nur mit Chrome. Jetzt funktioniert es, weil ich einen absoluten Pfad verwendet habe:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
Octavian Vladu
quelle
3

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

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

gefunden über

Davus
quelle
3

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.

Pierre
quelle
2
In den Kommentaren zur ausgewählten Lösung wird die Base64-Codierungslösung erwähnt.
Kaushik Gopal
@KaushikGopal Ich denke, die Antwort muss bearbeitet worden sein, nachdem ich dies gepostet habe.
Pierre
3

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.

niall.campbell
quelle
DIES. MyFonts.com spuckt die so genannten Schriftdateien aus und führt dazu, dass Firefox 35 auf alle möglichen bizarren Arten gerendert wird. Das Umbenennen der Schriftart löste das Problem.
Coreyward
2

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.

Casey
quelle
Eigentlich sollten Sie dafür nicht die Google Font API verwenden. Es gibt ein Problem mit Firefox, das verhindert, dass die Schriftvarianten (kursiv, fett usw.) verwendet werden, wenn Sie die Schriftart lokal installiert haben. Der einzige Weg, den ich gefunden habe, besteht darin, die lokale src-Deklaration mit dem Smiley zu versehen (natürlich würden alle seltsamen Charaktere dies tun, es ist einfach so ... glücklich).
Jason
Hier ist ein Link zum Fehlerbericht: code.google.com/p/googlefontdirectory/issues/detail?id=13
Jason
2

Versuchen Sie, die lokale Quelldeklaration in Ihren @font-faceAnweisungen 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

Jason
quelle
Wusste nicht, dass PaulI eine neue Aufzählungsmethode entwickelt hat, muss diese ausprobieren und sehen, ob sie meine Probleme mit der FF-Schriftart löst.
Kaushik Gopal
[Update: Obwohl hilfreich, löst es das Problem nicht]. Ich wurde jedoch auf die richtige Lösung hingewiesen.
Kaushik Gopal
1

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.

David Baron
quelle
Hmm .. ja David, ich scheine es lokal auszuführen, aber ich hatte vorher ein Unterverzeichnis mit demselben Verzeichnis. Meine type.css befindet sich also im Stammordner und an derselben Stelle im Schriftartenordner. Typ.css und der Schriftartenordner befinden sich also im selben Verzeichnis. Um auf der sicheren Seite zu sein, habe ich auch versucht, es aus dem Verzeichnis zu entfernen und die Schriftarten direkt zu platzieren. Bei Firefox funktioniert es immer noch nicht.
Kaushik Gopal
Ich fange jetzt an zu spüren, dass es eines der beiden ist: 1) Etwas in meiner Codierung stimmt nicht. Wenn jemand etwas von dem obigen Code entdeckt, sei bitte so freundlich, darauf hinzuweisen. 2) FF behandelt @ font-face und den Import mehrerer Dateien nicht gut? Ich verwende main.css, welches inturn @import type.css importiert, welches wiederum den Ordner mit den Schriftarten verknüpft hat. Irgendwelche leichten Leute? Übrigens danke für den Schriftgewicht-Fang @David!
Kaushik Gopal
Firefox verarbeitet mehrere Importe einwandfrei. Welche Version verwenden Sie? Debuggen Sie den Code mit FireBug. Verwenden Sie den Prozess der Beseitigung. Das Arbeiten vor Ort führt zu Problemen, die möglicherweise aus der Ferne behoben werden. So debuggen Sie!
Casey
"Dateien in verschiedenen Verzeichnissen werden für domänenübergreifende Regeln als unterschiedliche Domänen betrachtet" - nein, das sind sie nicht.
Mike Chamberlain
1

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.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

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.

bort
quelle
1

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:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

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.

WebFixItMan
quelle
1

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:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

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

Ganesh Garad
quelle
0

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!

ipalaus
quelle
1
Ich bezweifle stark, dass es nur in einem Browser und nicht in anderen Browser funktioniert.
Jason
@jason Ein Browser kann einen anderen Dateityp als einen anderen verwenden. :)
ipalaus
Nun, in den Fällen, in denen ich auf dieses Problem gestoßen bin, kann ich zu 100% sagen, dass das Net Panel von Firebug anzeigt, dass die Schrift erfolgreich geladen wurde.
Jason
0

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:

@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";
}
rossisdead
quelle
0

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.

SKWebDev
quelle
0

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.

@font-face {
  font-family: "DroidSerif Regular";

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:

@font-face {
  font-family: "Droid Serif Regular";

ODER

@font-face {
  font-family: DroidSerif-Regular;

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/

arri
quelle
0

Sie müssen nicht mit den Einstellungen herumspielen, sondern entfernen nur die Anführungszeichen und Leerzeichen aus der Schriftfamilie:

Dies

body {font-family: "DroidSerif Regular", serif; }

wird dies

body {font-family: DroidSerifRegular, serif; }
CR41G14
quelle
0

In meinem Fall habe ich das Problem beim Einfügen von Code für Schriftarten behoben

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

Direkt im Header auf Ihrer index.html- oder PHP-Seite im Style-Tag. Funktioniert bei mir!

Aleksandar
quelle
0

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.

theva
quelle
0

Möglicherweise liegt es nicht an Ihrem Code, sondern an Ihrer Firefox-Konfiguration.

Versuchen Sie dies von Tool bar Western bis Unicode

View > Text Encoding > Unicode
Simplans
quelle
0

Ich hatte das gleiche Problem und löste es durch Hinzufügen von Meta für Inhalte:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Dies geschieht in Firefox und Edge, wenn Sie Unicode-Texte in Ihrem HTML-Code haben.

Amir Mola
quelle
-2

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

rnaud
quelle
Danke rnaud, ich habe tatsächlich Fontsquirrel für die oben genannten verwendet :). Nur mit Tabulatoren und Leerzeichen in eine lesbare Form umformatiert.
Kaushik Gopal
Sie haben SVG noch nie in der Schriftdeklaration verwendet, aber Sie verwenden Font Squirrel? Dann haben Sie SVG in der Schriftdeklaration verwendet.
Jason
1
@ Jason: Sie können die Verwendung von SVG mit Font Squirrel deaktivieren.
Rossisdead
-2

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.

Nehbur
quelle
-2

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

mikołaj
quelle