Verwenden Sie mehrere benutzerdefinierte Schriftarten mit @ font-face?

Ich bin sicher, ich vermisse etwas wirklich direktes. Verwenden Sie eine einzelne benutzerdefinierte Schriftart mit normaler Schriftart:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

Alles funktioniert gut, wenn ich es benutze, aber wenn ich eine andere benutzerdefinierte Schriftart hinzufügen möchte, was mache ich dann? Ich habe versucht, die nächste durch Komma zu trennen oder eine ganz andere Schriftart hinzuzufügen, aber die zweite Schriftart funktioniert nicht.

Sie fügen einfach eine weitere @font-faceRegel hinzu:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Wenn Ihre zweite Schriftart immer noch nicht funktioniert, stellen Sie sicher, dass Sie den Schriftnamen und den Dateinamen richtig schreiben, die Caches Ihres Browsers sich verhalten, Ihr Betriebssystem nicht mit einer gleichnamigen Schriftart herumspielt usw.

Wenn Sie ein Problem mit der funktionierenden Schrift haben, hatte ich dies auch in der Vergangenheit und das Problem, das ich gefunden habe, war auf die Schriftfamilie zurückzuführen: name. Dies musste mit dem tatsächlich angegebenen Schriftnamen übereinstimmen.

Der einfachste Weg, dies herauszufinden, bestand darin, die Schriftart zu installieren und zu sehen, welcher Anzeigename angegeben ist.

Zum Beispiel habe ich Gill Sans für ein Projekt verwendet, aber die eigentliche Schriftart hieß Gill Sans MT. Abstand und Kapitulation waren ebenfalls wichtig, um richtig zu machen.

Hoffentlich hilft das.

Schauen Sie sich fontsquirrel an . Sie haben einen Web-Font-Generator, der auch ein geeignetes Stylesheet für Ihre Font ausspuckt (suchen Sie nach "@ font-face kit"). Dieses Stylesheet kann in Ihrem eigenen enthalten sein oder Sie können es als Vorlage verwenden.

Sie können ganz einfach mehrere Schriftarten verwenden. Unten sehen Sie ein Beispiel, wie ich es in der Vergangenheit verwendet habe:

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Es ist erwähnenswert, dass Schriftarten in verschiedenen Browsern lustig sein können. Schriftgesicht in früheren Browsern funktioniert, aber Sie müssen eot-Dateien anstelle von ttf verwenden.

Aus diesem Grund füge ich meine Schriftarten in den Kopf der HTML-Datei ein, da ich dann bedingte IE-Tags verwenden kann, um EOT- oder TTF-Dateien entsprechend zu verwenden.

Wenn Sie zu diesem Zweck ttf in eot konvertieren müssen, gibt es eine brillante Website, die Sie kostenlos online unter http://ttf2eot.sebastiankippe.com/ finden können .

Hoffentlich hilft das.

Ich benutze diese Methode in meiner CSS-Datei

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}