Dies ist meine @ font-face-Deklaration, um verschiedene Schriftvarianten zu unterstützen, in diesem Fall die fettgedruckte Version meiner Schriftart.
%Vor% Im Moment arbeite ich nur mit Chrome und Firefox. In Chrome funktionieren die normalen und die fettgedruckten Varianten, aber nicht die kühnere Variante (behält die fettgedruckte Variante bei). In Firefox funktioniert nur die fettgedruckte Variante wie erwartet, in allen anderen Fällen wird die kühne Variante verwendet (auch für normales Gewicht).
Ist das ein bekanntes Problem oder gibt es einen besseren Weg, diese Erklärung zu machen?
Hier gibt es zwei separate Probleme:
Keywords
Das Problem bei der Verwendung von font-weight-Schlüsselwörtern scheint zu sein, dass lighter und bolder keine absoluten Werte wie normal und bold (immer 400 bzw. 700) sind, sondern relativ zur festgelegten Fettschrift des Elternelements (100 heller oder dunkler). Es ist möglicherweise nicht möglich, lighter und bolder so zu behandeln, als wären sie absolute Werte.
Wie @HTMLDeveloper und @Christoph vorgeschlagen haben, ist die Verwendung von numerischen Werten anstelle von Schlüsselwörtern die einfache Lösung und kann selbst eine angemessene Lösung sein (falls keine Unterstützung für IE8 benötigt wird).
%Vor%IE8 und früher
Einige Browser haben Anzeigeprobleme, wenn mehrere Gewichtungen oder Stile mit demselben font-family name verknüpft sind.
Spezifische Probleme, die mir bekannt sind: (Möglicherweise gibt es andere)
Die Lösung besteht darin, für jede Schriftartenvariation einen eindeutigen font-family Namen zu verwenden:
Dieser Ansatz wird häufig von Schriftarten wie Typekit verwendet. Wenn Unterstützung für eine Vielzahl von Browsern benötigt wird (oder zumindest IE8 im Besonderen), könnte dies als einer der Preise betrachtet werden, die Sie zahlen müssen, wenn Sie Schriftarten einbetten.
In der Schriftart "Schriftart einzeln" werden die Anführungszeichen für den Namen der Schriftart nicht benötigt. Sie sollten entfernen und ausführen, es funktioniert gut. font-family: santana; font-weight: 900; benötigt keine einzelne Schrift, sie benötigt nur mehrere Schriftarten. Anstatt mutiger Zahlenwert zu verwenden, sollte es gut funktionieren.
Tags und Links css cross-browser font-face webfonts