So passen Sie Schriftarten in CSS an

So passen Sie Schriftarten in CSS an: 1. Laden Sie die Schriftartendatei herunter. 2. Verwenden Sie die Regel „@font-face“ und die Attribute „font-family“ und „src“, um die Schriftartendatei einzuführen -family: 'Schriftartname';src:url('Dateiadresse');}".

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Wenn wir einige persönliche Websites im Ausland durchsuchen, können wir immer einige sehr personalisierte Schriftarten finden, wie z. B.

Aber da die auf dem Computer installierten Schriftarten begrenzt sind, können wir derzeit oft nicht die Schriftarten finden, die wir benötigen um @font-face von CSS3 zu verwenden, um personalisierte Schriftarten zu implementieren.

Aber es ist falsch zu sagen, dass @font-face eine neue Funktion in CSS3 ist, da diese Funktion bereits in CSS2 unterstützt wurde und der IE-Browser sie zu diesem Zeitpunkt auch unterstützte, andere Browser sie jedoch noch nicht unterstützten. Derzeit unterstützen bereits alle gängigen Browser diese neue Funktion. Wie nutzt man diese Funktion konkret? Schauen Sie sich den Code unten an:

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;)，url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

Zuerst: Wir müssen @font-face in CSS einführen und die Schriftartfamilie verwenden, um den gewünschten Schriftartnamen festzulegen. Hier verwende ich ihn als myFont (natürlich kann es auch yourFont sein). usw. usw.).

Zweitens: Wir müssen unsere Lieblingsschriftarten herunterladen. Aber Sie sollten wissen: Firefox, Chrome, Safari und Opera unterstützen Schriftarten vom Typ .ttf (True Type Fonts) und .otf (OpenType Fonts). Und Internet Explorer 9+ unterstützt die neue @font-face-Regel, unterstützt aber nur Schriftarten vom Typ .eot (Embedded OpenType).

Font Squirrel (https://www.fontsquirrel.com/) Diese kostenlose Schriftarten-Ressourcen-Website bietet viele Schriftarten zum Herunterladen, die meisten davon sind Schriftarten in den Formaten otf und ttf. Darüber hinaus ist defont.com (http://www.dafont.com/) auch eine kostenlose Ressourcen-Website für Schriftarten, und das heruntergeladene Format ist im Allgemeinen ttf.

Offensichtlich sind die von diesen beiden Websites heruntergeladenen Hauptschriftarten nicht mit dem IE-Browser kompatibel. Zu diesem Zweck können wir das Schriftartenkonvertierungstool TTF to EOT Font Converter (https://www.kirsle.net/wizards/ttf2eot.cgi) verwenden, um Schriftarten im TTF-Format in das EOT-Format zu konvertieren, um sie mit IE-Browsern kompatibel zu machen.

Aber das beste Tool zur Schriftartenkonvertierung ist der von Font Squirrel bereitgestellte Generator (https://www.fontsquirrel.com/tools/webfont-generator). Wählen Sie nach der Eingabe die Expertenoption zum Konvertieren zwischen verschiedenen Schriftartenformaten.

Drittens: Dekomprimieren Sie die Datei nach dem Herunterladen und konvertieren Sie sie mit einem Schriftartenkonvertierungstool in ein IE-kompatibles EOT-Format. Verwenden Sie beispielsweise src:url("rajdhani-bold.ttf"), url("rajdhani-bold.eot");, um die Schriftart zu importieren, wobei die URL ein relativer Pfad oder ein absoluter Pfad ist.

Viertens: Zu diesem Zeitpunkt können wir unsere eigenen personalisierten Schriftarten über die Schriftfamilie in CSS hinzufügen.

Dies ist der Text vor der Verwendung der benutzerdefinierten Schriftart:

Dies ist der Text nach der Verwendung der benutzerdefinierten Schriftart:

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo passen Sie Schriftarten in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!