Gewusst wie: Debuggen von @font-face-Probleme?

Habe ich den folgenden CSS-code:

//theMixPlainSemiBold
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Erwarte ich, dass dieser erstellt eine neue Schriftfamilie namens theMixPlainSemiBold.

Nach dem Import dieser Schrift, die ich tun:

.box {
    ...
    font-family: 'theMixPlainSemiBold', sans-serif;
    ...
}

Habe ich die box Klasse, die haben theMixPlainSemiBold font-Familie.

Wenn ich öffnen Sie die Seite, die ich sehen sans-serif schriftart in der .box.

Was kann das problem sein? Dasselbe geschieht für die anderen lokalen web-fonts, während es funktioniert gut mit Google Fonts.

Wie kann ich Debuggen Sie die schriftart Probleme? Ich sehe keine Fehler/Warnungen in Entwickler-tools. Es sieht für mich wie die schriftart ist nicht geladen, aus lokalen Dateien...

  • haben Sie eine live-demo-link, den wir können einen Blick haben?
  • Nein, tut mir Leid...
  • Können Sie überprüfen, welche Schriftarten herunterladen in Firefox/chrome?
  • In der Developer Tools (Chrome) > Network > Fonts ich nicht sehen, diese schriftart... Es scheint, dass es nicht geladen ist, in die Seite.
  • Sind Sie sicher, dass diese Schriften in den richtigen Pfad?
  • Ja, ich bin sicher. Das problem war mit der // Kommentare. Siehe meine Antwort.
  • Die Antwort mein Freund weht im wind... (@IonicăBizău :)) )

InformationsquelleAutor Ionică Bizău | 2014-01-03
  1. 4

    Dies ist zwar keine wirkliche Antwort auf die Frage, fand ich das problem selber. Doppel-Schrägstriche (//) sind nicht gültig CSS-Kommentare! Siehe dieser screenshot aus der Entwickler-Werkzeuge:

    Gewusst wie: Debuggen von @font-face-Probleme?

    So, mein code wird:

    /* theMixPlainSemiBold */
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    Die Schriftarten werden korrekt geladen jetzt.

    • Doppel-Schrägstriche sind keine gültigen CSS-Kommentare, Recht, aber macht es einen Unterschied? Ich sah Sie mehrere Male, und Sie funktionieren trotzdem.
    • Ja, diese machen den Unterschied.
    • Nice catch.. btw
    • Sicher, ich sehe es. Aber wie ist das möglich? Sollte nicht die Zeile mit der ungültigen Kommentar ignoriert werden insgesamt?
    • Wie pro meine Kenntnisse, wenn es eine ungültige Zeile im CSS, Die code unter der Zeile, wird nicht funktionieren.
    • Fragte ich noch eine Frage für, die.
    • von Ihnen positiv bewertet werden und für einen guten Fang
    • Diese Antwort ist nicht wirklich die Frage beantwortet, Nein? Deine Frage wurde Wie kann ich Debuggen von Problemen mit Schriftarten. Aber die Antwort ist ich habe eine Doppel-slash in meiner Schrift. Obwohl dies sagt mir, wie man dieses problem beheben, es hilft aber nicht mit dem Allgemeinen problem, wie die debug-Ausgaben, in der Regel, wie der Frage Titel schon sagt. Vielleicht den Titel ändern?
    • Stimmt... In der Tat, ich glaube nicht, dass es eine echte Lösung für das problem... Dev-tools könnte nützlich sein, sowieso.
    • Während diese Antwort kann nicht technisch Antwort das problem, es löste mein Problem perfekt – es war sicherlich nützlich, während ich habe versucht zu Debuggen mein Problem. Danke!
    • Schön! Froh zu hören, dass es noch Menschen hilft, nach Jahren. 🙂 Du bist herzlich willkommen!

    InformationsquelleAutor Ionică Bizău
  2. 1
    @font-face {
    font-family: anyname;
    src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf');
        font-weight: normal;
        font-style: normal;
}

    dann verwenden Sie es wie diese:

    #sample{
    font-family:anyname;
}

    können Sie einen beliebigen Namen in der it. / ist wichtig, in der url, weil es zeigt, dass es in einen Ordner.

    InformationsquelleAutor nicole101
  3. 1

    Erste ist, eine eindeutige benutzerdefinierte font-family name kann helfen, Debuggen, da es verhindert, dass Ihre lokale Schriften ausgelöst werden und verwendet werden.

    Dann, während dies beschränkt sich nicht nur auf @font-face Probleme, Firefox Entwickler tools' Konsole kann sicherlich helfen Debuggen CSS-Probleme.

    In Ihrem Fall, es würde festgestellt haben, die schlechte Kommentare:

    Selector expected.  Ruleset ignored due to bad selector.  yourfile.css:23

    In meinem Fall, aufgrund der schlechten Bearbeitung nach copypasta ich hatte eine nachgestellte Komma statt einem Semikolon, das verhindert Firefox zum download des font:

    @font-face{
    font-family: SuperFont;
    src: url('../fonts/Superfont.ttf'),
}

    Die Konsole kam mit:

    Error in parsing value for ‘src’.  Skipped to next declaration.  myfile:18

    Oder die Konsole können zu beklagen:

    downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf

    (Dies würde in der Regel Folgen einem 404 auf die schriftart, URL, verdammte Tippfehler...)

    InformationsquelleAutor Skippy le Grand Gourou
  4. 0

    Wenn Sie sind, prototyping und beobachten Sie Ihre frisch generierten HTML-Code als statische, lokale Dateien, die Schriftarten möglicherweise nicht geladen. ( Weil einige cross-domain-policies, die vom browser?)

    So, hätten anfordern müssen Ihren html-Code über einen (lokalen) server.

    InformationsquelleAutor Ideogram
  5. -1

    bitte überprüfen Sie Ihre Verbindung zur Quelle

    @font-face {
  font-family: 'theMixPlainSemiBold';
  src: url('../css/fonts/.eot');
  src: url('../css/fonts/.eot?#iefix') format('embedded-opentype'),
       url('../css/fonts/.woff') format('woff'),
       url('../css/fonts/.ttf') format('truetype'),
       url('../css/fonts/.svg#open_sanslight') format('svg');
  font-weight: normal;
  font-style: normal;
}

    vielleicht vergessen Sie ../ denn wenn Schriftarten von google arbeitet normal also dein link (Quelle) Ihre Schrift falsch sein muss

    • Warum setzen ../ würde das problem lösen?
    • Ihr code korrekt ist, so problem ist mit der Quelle, müssen Sie prüfen, ob Sie den link zu dieser schriftart. Öffnen Sie browser, zeigen Sie die Quelle Ihrer website und überprüfen Sie die links zu Ihren font. Ich verwende ../ weil du vielleicht links ist nicht korrekt. Bitte überprüfen Sie die links zu den Schriftarten.
    • Ich fand die Antwort. Mein problem ist endlich gelöst. Danke.
    • Ich hatte das exakt gleiche problem und entfernen die einzige Zeile Kommentar Stil war der fix. Jedoch, wollte nur hinzufügen, dass firebug war hilfreich bei der Lösung dieses über chrome-debugger, als es zeigt, dass Sie die Schriftarten, wie Sie gerendert werden, wenn Sie den Mauszeiger über den Namen der Schrift; chrome nicht. Dies war hilfreich, da meine benutzerdefinierte schriftart war etwas ähnlich zu den Standard-sans-serif gezogen in.
    InformationsquelleAutor mcmac
Schreibe einen Kommentar