Die Schriftnutzung ist ein unverzichtbarer Bestandteil des Webdesigns. Oft möchten wir eine bestimmte Schriftart in einer Webseite verwenden, aber die Schriftart ist keine integrierte Schriftart für Mainstream-Betriebssysteme, sodass Benutzer beim Surfen der Seite möglicherweise nicht das eigentliche Design sehen können. Die häufigste Möglichkeit für Kunstdesigner ist, den gewünschten Text zu Bildern zu machen . Es gibt einige Methoden im Internet, die die SIFR -Technologie oder JavaScript/Flash -Hack verwenden, aber die Implementierung ist entweder umständlich oder fehlerhaft. Was wir weiter unten sprechen möchten, ist, wie man eine Schriftart in eine Webseite nur über das @font-face-Attribut von CSS einbettet.
Erster Schritt
Lassen Sie die drei Dateiformate die Schriftart verwenden, um sicherzustellen, dass die Schriftart normalerweise in Mainstream -Browsern angezeigt werden kann.
.Ttf oder .otf, geeignet für Firefox 3.5, Safari, Opera
.Eot, für Internet Explorer 4.0+
.Svg, geeignet für Chrome, iPhone
Im Folgenden möchten wir nach unten gelöst werden, wie diese drei Formatdateien einer bestimmten Schriftart erhalten können. Im Allgemeinen verfügen wir über eine Formatdatei für diese Schriftart (oder bereits an der Design -Ressourcenstelle gefunden), von der die häufigste eine .ttf -Datei ist, die wir über dieses Dateiformat in die verbleibenden zwei Dateiformate konvertieren müssen. Die Konvertierung von Schriftdateiformaten kann über den Online -Schriftart -Conversion -Service erhalten werden, der vom Website Fontsquirrel oder OnlineFontConverter bereitgestellt wird. Die erste Site wird hier empfohlen, mit der wir die erforderlichen Zeichen zum Generieren von Schriftarteien (die letzte Option des Dienstes) auswählen können, wodurch die Größe der Schriftartdateien stark reduziert und diese Lösung praktischer wird.
Schritt 2
Nachdem die Schriftart in drei Formaten erhalten wurde, besteht der nächste Schritt darin, die Schriftart im Stilblatt zu deklarieren und die Schriftart zu verwenden, an der sie benötigt wird.
Die Schriftdeklaration lautet wie folgt:
@font-face {
Schriftfamilie: 'fontnameregular';
SRC: URL ('fontName.eot');
SRC: Lokal ('Fontname regulär'),
Lokal ('Fontname'),
URL ('fontName.woff') Format ('Woff'),
URL ('fontName.ttf') Format ('TrueType'),
URL ('fontName.svg#fontName') Format ('SVG');
}
/* wobei FontName durch Ihren Schriftnamen ersetzt wird*/
Verwenden Sie diese Schriftart, wo Sie sie auf der Seite benötigen:
p {font: 13px fontnameregular, arial, sans-serif;
H1 {Schriftfamilie: fontnameregular}
oder
<p style = "Schriftfamilie: fontnameregular"> Kuscheln Sie den Mond in Ihre Hände, und der Duft von gefallenen Blumen füllt Ihre Kleidung </p> </p>
Hier ist ein Beispiel, das ich in den oben genannten zwei Schritten gemacht habe:
Führen Sie die Codebox aus
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> Komplette Lösung zum Einbetten einer Schrift in Webseiten - CSS9.net </title>
<link rel = "stylesheet" href = "http://www.bluidea.com/articleimg/2009/12/7263/style.css"/>
<style type = "text/css">
@font-face {
Schriftfamilie: "Hakuyoxingshu7000REGULAR";
SRC: URL ('http://www.bluidea.com/articleimg/2009/12/7263/7000.eot');
SRC: Local ('HakuyoxingShu7000 regulär'), lokal ('Hakuyoxingshu7000'), URL ('http://www.bluidea.com/articleImg/2009/12/7263/7000.ttf') Format ('truetype'),,,,,,,),,,,,,,,),,,,,,,,, Die),),,,,,,,,,,,,,),,,,,,,,,,),,,,,,,),,,,,, URL ('http://www.bluidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingShu7000') Format ('SVG');
}
#Gedicht{
Schriftgröße: 45px;
Schriftfamilie: Hakuyoxingshu7000Regular;
Text-Align: Mitte;
}
#poem p {Höhe: 30px; Zeilenhöhe: 30px;}
</style>
</head>
<body>
<div id = "testDiv">
<h1> Vollständige Lösung zum Einbetten einer Schrift in Webseiten - CSS9.NET </h1>
<h2> Greifen Sie auf den Originaltext zu: <a href = "http://css9.net/css-font-face-solution/"> http://css9.net/css-font-face-solution/ </a > & nbsp; & nbsp; & nbsp; Folgen Sie der Web-Front-End-Entwicklung- <a href = "http://css9.net"> css9.net </a> </h2>
<div id = "poem">
<h3> Cloud ist vegetarisch </h3>
<p> Es gibt Klassenkameraden in der Hauptstadt, und wir treffen uns im vegetarischen Pavillon. </p> <p> Der Hörer ist noch nicht fertig, aber die Person, die spricht, hat bereits viel gesprochen. </p> <p> Es gibt Freunde im ganzen Raum, und ich werde über die Zivilwissenschaften sprechen. </p> <p> Senden Sie kleine Wörter in Zen, seien Sie vorsichtig und sanft. </p>
</div>
</body>
</html>
[Strg+A Alle Auswahltipps: Sie können zuerst einen Code ändern und dann Run drücken]
Die Schriftart im obigen Artikel verwendet einen von diesem Blog veröffentlichten Brunnenstift.
Laden Sie den Quellcode für dieses Beispiel herunter: Webseiten -Schriftenbeispiel
Originaltext: http://css9.net/css-font-face-solution/