Die Verwendung von Schriftarten ist ein wesentlicher Bestandteil des Webdesigns. Oft möchten wir eine bestimmte Schriftart auf einer Webseite verwenden, aber die Schriftart ist keine integrierte Schriftart des Mainstream-Betriebssystems, sodass Benutzer beim Durchsuchen der Seite möglicherweise nicht das tatsächliche Design sehen. Die von Kunstdesignern am häufigsten verwendete Methode besteht darin, den gewünschten Text in Bilder umzuwandeln. Dies weist mehrere offensichtliche Mängel auf: 1. Es ist unmöglich, die Schriftart in großem Maßstab zu verwenden. 2. Der Inhalt des Bildes lässt sich nicht einfach ändern zur Verwendung von Text; 3. Es ist nicht einfach, die Schriftart zu ändern. Dies ist förderlich für die Website-SEO (Mainstream-Suchmaschinen verwenden Bild-Alternativinhalte nicht als wirksamen Faktor bei der Beurteilung der Relevanz von Webinhalten). Es gibt einige Methoden im Internet, die die sIFR-Technologie oder Javascript/Flash-Hack nutzen, aber ihre Implementierung ist entweder umständlich oder fehlerhaft. Als nächstes werde ich darüber sprechen, wie man eine beliebige Schriftart nur über das @font-face-Attribut von CSS in eine Webseite einbetten kann.
erster Schritt
Besorgen Sie sich die drei Dateiformate der zu verwendenden Schriftart und stellen Sie sicher, dass die Schriftart in gängigen Browsern normal angezeigt werden kann.
Als nächstes muss gelöst werden, wie man diese drei Formatdateien einer bestimmten Schriftart erhält. Im Allgemeinen haben wir eine bestimmte Formatdatei der Schriftart zur Hand (oder haben sie auf einer Design-Ressourcenseite gefunden), die häufigste ist eine .TTF-Datei, und wir müssen dieses Dateiformat in die beiden anderen Dateiformate konvertieren. Die Konvertierung von Schriftartdateiformaten kann über den Online-Schriftartkonvertierungsdienst der Website FontsQuirrel oder onlinefontconverter erfolgen. Hier wird die erste Seite empfohlen, die es uns ermöglicht, die Zeichen auszuwählen, die wir zum Generieren von Schriftartdateien benötigen (die letzte Option im Dienst), was die Größe der Schriftartdateien erheblich reduziert und diese Lösung praktischer macht.
Schritt 2
Nachdem Sie die Schriftartdateien in drei Formaten erhalten haben, besteht der nächste Schritt darin, die Schriftart im Stylesheet zu deklarieren und die Schriftart bei Bedarf zu verwenden.
Die Schriftartdeklaration lautet wie folgt:
@font-face {
Schriftfamilie: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
URL('fontName.woff') format('woff'),
URL('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*Ersetzen Sie „fontName“ durch den Namen Ihrer Schriftart*/
Verwenden Sie die Schriftart an den erforderlichen Stellen auf der Seite:
p { Schriftart: 13px SchriftartRegular, Arial, serifenlos }
h1{Schriftfamilie: FontNameRegular}
oder
<p style="font-family: fontNameRegular">Wenn man den Mond im Wasser hält, erfüllt der Duft gefallener Blumen die Kleidung</p>
Hier ist ein Beispiel dafür, was ich in den beiden oben genannten Schritten getan habe:
Codefeld ausführen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eine Komplettlösung zum Einbetten beliebiger Schriftarten in eine Webseite – CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<style type="text/css">
@font-face {
Schriftfamilie: 'hakuyoxingshu7000Regular';
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
#Gedicht{
Schriftgröße:45px;
Schriftfamilie:hakuyoxingshu7000Regular;
text-align:center;
}
#Gedicht p{height:30px;line-height:30px;}
</style>
</head>
<Körper>
<div id="testdiv">
<h1>Eine Komplettlösung zum Einbetten beliebiger Schriftarten in eine Webseite – CSS9.NET</h1>
<h2>Besuchen Sie den Originaltext: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;Fokus auf Web-Frontend-Entwicklung – <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="poem">
<h3>Yunwei ist Vegetarierin</h3>
<p>Es gibt Klassenkameraden in Peking und wir treffen uns im vegetarischen Restaurant. </p><p>Die Zuhörer haben noch nicht zu Ende gesprochen, aber die Redner haben zu viel gesprochen. </p><p>Das Haus war voller Freunde, die frei über He Minke redeten. </p><p>Senden Sie kleine Worte im Zen, sprechen Sie vorsichtig und sanft. </p>
</div>
</body>
</html>
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]
Die Schriftart im obigen Artikel verwendet eine zuvor in diesem Blog veröffentlichte Stiftschrift. Wenn sie Ihnen gefällt, können Sie sie herunterladen.
Laden Sie den Quellcode für dieses Beispiel herunter: Web Embed Font Beispiel
Originaltext: http://css9.net/css-font-face-solution/