Antworten:
Ja, Sie können die CSS-Funktion @ font-face verwenden. Es wurde nur in CSS3 offiziell genehmigt, aber in CSS2 vorgeschlagen und implementiert und wird seit geraumer Zeit im IE unterstützt.
Sie deklarieren es im CSS folgendermaßen:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Dann können Sie es einfach wie die anderen Standardschriftarten referenzieren:
h3 { font-family: Delicious, sans-serif; }In diesem Fall also
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>Und Sie müssen nur die JUNEBUG.TFF am selben Speicherort wie die HTML-Datei ablegen.
Ich habe die Schriftart von der dafont.com- Website heruntergeladen:
url, wo sich Ihre CSS- Datei befindet.
Für die bestmögliche Browserunterstützung sollte Ihr CSS-Code folgendermaßen aussehen:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Weitere Informationen finden Sie im Artikel Verwenden von @ font-face unter CSS-tricks.com .
Sie können @ font-face in den meisten modernen Browsern verwenden.
Hier sind einige Artikel darüber, wie es funktioniert:
Hier ist eine gute Syntax zum Hinzufügen der Schriftart zu Ihrer App:
Hier sind einige Stellen zum Konvertieren von Schriftarten zur Verwendung mit @ font-face:
Cufon funktioniert auch, wenn Sie kein Schriftbild verwenden möchten, und es enthält eine gute Dokumentation auf der Website:
Versuche dies
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Wenn Sie ein externes Stylesheet verwenden, könnte der Code ungefähr so aussehen:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }Und sollte in einer separaten CSS-Datei (z. B. styles.css) gespeichert werden. Wenn sich Ihre CSS-Datei an einem vom Seitencode getrennten Speicherort befindet, sollte die eigentliche Schriftartdatei denselben Pfad wie die CSS-Datei haben, NICHT die HTML- oder PHP-Webseitendatei. Dann braucht die Webseite so etwas wie:
<link rel="stylesheet" href="css/styles.css">im Abschnitt <head> Ihrer HTML-Seite. In diesem Beispiel sollte sich die Schriftartdatei zusammen mit dem Stylesheet im CSS-Ordner befinden. Fügen Sie danach einfach die class = "junebug" in ein beliebiges Tag in Ihrem HTML ein, um die Junebug-Schriftart in diesem Element zu verwenden.
Wenn Sie das CSS in die eigentliche Webseite einfügen, fügen Sie das Style-Tag im Kopf des HTML-Codes wie folgt hinzu:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>Der eigentliche Elementstil kann entweder oben aufgeführt <style>und pro Element nach Klasse oder ID aufgerufen werden, oder Sie können den Stil einfach inline mit dem Element deklarieren. Mit Element meine ich <div>, <p>, <h1> oder jedes andere Element im HTML, das die Junebug-Schriftart verwenden muss. Bei beiden Optionen sollte sich die Schriftartdatei (Junebug.ttf) im selben Pfad wie die HTML-Seite befinden. Von diesen beiden Optionen würde die beste Vorgehensweise folgendermaßen aussehen:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>und
<h1 class="junebug">This is Junebug</h1>Und der am wenigsten akzeptable Weg wäre:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>und
<h1 style="font-family: Junebug;">This is Junebug</h1>Der Grund, warum es nicht gut ist, Inline-Stile zu verwenden, ist, dass nach bewährten Methoden alle Stile an einem Ort aufbewahrt werden sollten, damit die Bearbeitung praktisch ist. Dies ist auch der Hauptgrund, warum ich die Verwendung der allerersten Option zur Verwendung externer Stylesheets empfehle. Ich hoffe das hilft.
Es gibt eine einfache Möglichkeit, dies zu tun: Fügen Sie in der HTML-Datei Folgendes hinzu:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Hinweis: Sie geben den Namen der .ttf-Datei ein, die Sie haben. Gehen Sie dann zu Ihrer CSS-Datei und fügen Sie hinzu:
h1 {
color: blue;
font-family: vermin vibes;
}Hinweis: Sie geben den Namen der Schriftfamilie der Schriftart ein, die Sie haben.
Hinweis: Schreiben Sie den Namen der Schriftfamilie nicht als Ihren font.ttf-Namen. Beispiel: Wenn Ihr font.ttf-Name "vermin_vibes.ttf" lautet, lautet Ihre Schriftfamilie: "vermin vibes" Die Schriftfamilie enthält keine Sonderzeichen als "-, _" ... usw. darf es nur Leerzeichen enthalten.
font-facein CSS definieren, anstatt eine ttf-Datei zu benötigen.