Wie kann ich @ font-face Probleme beheben?
Ich habe den folgenden CSS-Code:
%Vor% Ich erwarte, dass dies eine neue Schriftfamilie mit dem Namen theMixPlainSemiBold erstellt.
Nach dem Import dieser Schriftart mache ich:
%Vor% Ich habe die Klasse box , die theMixPlainSemiBold Schriftfamilie hat.
Wenn ich die Seite öffne, sehe ich sans-serif font in .box .
Was kann das Problem sein? Das Gleiche gilt für die anderen lokalen Webschriftarten, während es gut mit Google Fonts funktioniert.
Wie kann ich die Probleme mit den Schriften beheben? Ich sehe keine Fehler / Warnungen in den Entwicklertools. Es sieht für mich so aus, als wäre die Schriftart nicht aus lokalen Dateien geladen ...
5 Antworten
Obwohl das keine richtige Antwort auf die Frage ist, habe ich das Problem selbst gefunden. Doppelte Schrägstriche ( // ) sind keine gültigen CSS-Kommentare! Sehen Sie diesen Screenshot von den Entwicklertools:
Also wird mein Code:
%Vor%Die Schriften sind jetzt korrekt geladen.
Wenn Sie Prototypen erstellen und Ihr frisch generiertes HTML als statische lokale Dateien ansehen, werden die Schriftarten möglicherweise nicht geladen. (Wegen einiger bereichsübergreifender Richtlinien durch den Browser?)
Sie müssten also Ihren HTML-Code über einen (lokalen) Server anfordern.
Erstens kann die Verwendung eines eindeutigen benutzerdefinierten font-family -Namens beim Debuggen helfen, da dadurch verhindert wird, dass Ihre lokalen Zeichensätze ausgelöst und verwendet werden.
Auch wenn dies nicht auf @font-face issues beschränkt ist, kann die Firefox developer tools-Konsole sicher helfen, CSS-Probleme zu debuggen.
In Ihrem Fall hätte es die schlechten Kommentare erkannt:
%Vor%In meinem Fall hatte ich aufgrund einer schlechten Bearbeitung nach einem Copypasta ein nachkommendes Komma anstelle eines Doppelpunkts, was Firefox daran hinderte, die Schriftart herunterzuladen:
%Vor%Die Konsole kam mit
%Vor%Oder die Konsole kann sich über
beschweren %Vor%(Dies würde normalerweise einem 404 auf der Font-URL folgen, verdammte Tippfehler ...)