Gibt es eine Möglichkeit, eine benutzerdefinierte Schriftart auf einer Website hinzuzufügen, ohne Bilder zu verwenden? Blitzlicht oder eine andere Grafik?
Ich habe zum Beispiel an einer Hochzeits-Website gearbeitet und viele schöne Schriftarten für dieses Thema gefunden. Aber ich kann nicht den richtigen Weg finden, um diese Schriftart auf dem Server hinzuzufügen. Und wie kann ich diese Schriftart mit CSS in den HTML-Code einbinden? Ist das auch ohne Grafiken möglich?
Dies könnte über CSS geschehen:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>Sie ist unterstützt für alle gängigen Browser wenn Sie TrueType-Fonts (TTF), das Web Open Font Format (WOFF) oder Embedded Opentype (EOT) verwenden.
Sie können einige Schriftarten hinzufügen über Google Web-Schriftarten .
Technisch gesehen werden die Schriftarten bei Google gehostet, und Sie verlinken sie im HTML-Header. Dann können Sie sie frei in CSS verwenden mit @font-face ( darüber lesen ).
Zum Beispiel:
In der <head> Abschnitt:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>Dann in CSS:
h1 { font-family: 'Droid Sans', arial, serif; }Die Lösung scheint recht zuverlässig zu sein (auch Das Smashing Magazine verwendet es für den Titel eines Artikels. ). Es gibt jedoch nicht so viele Schriftarten, die bisher in Google Schriftarten-Verzeichnis .
Die beste Lösung ist die Verwendung der CSS-Deklaration @font-face, mit der Autoren Online-Schriftarten für die Darstellung von Text auf ihren Webseiten angeben können. Indem @font-face es den Autoren ermöglicht, ihre eigenen Schriftarten bereitzustellen, entfällt die Notwendigkeit, sich auf die begrenzte Anzahl von Schriftarten zu verlassen, die die Benutzer auf ihren Computern installiert haben.
Schauen Sie sich die folgende Tabelle an:
Wie Sie sehen, gibt es mehrere Formate, die Sie vor allem aus Gründen der Browserkompatibilität kennen müssen. Das Szenario bei mobilen Geräten ist nicht viel anders.
1 - Volle Browser-Kompatibilität
Dies ist die Methode, die im Moment die größte Unterstützung erfährt:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}2 - Der größte Teil des Browsers
Die Dinge sind stark in Richtung WOFF verlagert Aber Sie können wahrscheinlich damit durchkommen:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}3 - Nur die neuesten Browser
Oder auch nur WOFF.
Sie verwenden es dann wie folgt:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Das ist das Wichtigste, was Sie über die Implementierung dieser Funktion wissen müssen. Wenn Sie mehr zu diesem Thema recherchieren möchten, empfehle ich Ihnen, einen Blick auf die folgenden Ressourcen zu werfen. Das meiste von dem, was ich hier schreibe, ist aus den folgenden Quellen entnommen
Wenn Sie mit "Nicht-Standard-Schriftart" eine benutzerdefinierte Schriftart in einem Standardformat meinen, kann ich Ihnen hier zeigen, wie es geht, und es funktioniert bei allen Browsern, die ich bisher überprüft habe:
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}Sie benötigen also sowohl die ttf- als auch die eot-Schriftart. Einige online verfügbare Tools können die Konvertierung vornehmen.
Aber wenn Sie die Schrift in einem nicht standardisierten Format (Bitmaps usw.) anhängen wollen, kann ich Ihnen nicht helfen.
Der Artikel Font-face im IE: Web-Schriften zum Laufen bringen sagt, dass es mit allen drei gängigen Browsern funktioniert.
Hier ist ein Beispiel, das ich zum Laufen gebracht habe: http://brendanjerwin.com/test_font.html
Weitere Diskussionen sind in Einbetten von Schriftarten .
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
