it-swarm.com.de

Wie füge ich einer Website eine nicht standardmäßige Schriftart hinzu?

Gibt es eine Möglichkeit, eine benutzerdefinierte Schriftart auf einer Website hinzuzufügen, ohne Bilder, Flash oder andere Grafiken zu verwenden?

Ich habe zum Beispiel an einer Hochzeitswebsite gearbeitet und viele nette Schriftarten für dieses Thema gefunden, aber ich kann nicht den richtigen Weg finden, um diese Schrift auf dem Server hinzuzufügen, und wie kann ich diese Schrift mit CSS einbinden ins HTML? Geht das ohne Grafik?

492
vaske

Dies könnte über CSS erfolgen:

<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>

Dies ist wird von allen regulären Browsern unterstützt , wenn Sie TrueType-Fonts (TTF) oder das Web Open Font Format (WOFF) verwenden.

480
hangy

Sie können einige Schriftarten über Google Web Fonts hinzufügen.

Technisch gesehen werden die Schriftarten bei Google gehostet und Sie verknüpfen sie im HTML-Header. Dann können Sie sie in CSS mit @font-face ( lesen Sie darüber ) frei verwenden.

Zum Beispiel:

Im Abschnitt _<head>_:

_ <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 ziemlich zuverlässig zu sein (sogar Smashing Magazine verwendet sie für einen Artikeltitel. ). Es sind jedoch noch nicht so viele Schriftarten in Google Font Directory verfügbar.

115

Der Weg dahin ist die Verwendung der @ font-face-CSS-Deklaration, mit der Autoren Online-Schriftarten angeben können, die Text auf ihren Webseiten anzeigen sollen. Durch die Möglichkeit für Autoren, ihre eigenen Schriftarten bereitzustellen, muss @ font-face nicht mehr von der begrenzten Anzahl von Schriftarten abhängen, die Benutzer auf ihren Computern installiert haben.

Schauen Sie sich die folgende Tabelle an:

enter image description here

Wie Sie sehen, gibt es mehrere Formate, die Sie hauptsächlich aufgrund der browserübergreifenden Kompatibilität kennen müssen. Das Szenario auf Mobilgeräten ist nicht viel anders.

Lösungen:

1 - Volle Browserkompatibilität

Dies ist die Methode mit der derzeit höchstmöglichen Unterstützung:

@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 - Die meisten Browser

Die Dinge sind sich stark in Richtung WOFF verlagernd , also können Sie wahrscheinlich davonkommen mit:

@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 Wuff.
Dann verwendest du es so:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referenzen und weiterführende Literatur:

Das ist hauptsächlich das, was Sie über die Implementierung dieser Funktion wissen müssen. Wenn Sie mehr zu diesem Thema erfahren möchten, empfehlen wir Ihnen, sich die folgenden Ressourcen anzusehen. Das meiste, was ich hier schreibe, ist aus dem Folgenden extrahiert

74
Javier Cadiz

Wenn Sie unter Nicht-Standard-Schriftarten benutzerdefinierte Schriftarten eines Standardformats verstehen, gehen Sie wie folgt vor und dies funktioniert für alle Browser, 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 nur die Schriftarten ttf und eot. Einige online verfügbare Tools können die Konvertierung durchführen.

Aber wenn Sie Schriftarten in einem nicht standardmäßigen Format (Bitmaps usw.) anhängen möchten, kann ich Ihnen nicht helfen.

16
BiAiB

Ich habe festgestellt, dass die Verwendung von sIFR der einfachste Weg ist, nicht standardmäßige Schriftarten auf einer Website zu haben.

Hierbei wird ein Flash-Objekt verwendet, das die Schriftart enthält. Wenn Flash nicht installiert ist, führt dies jedoch zu einer Verschlechterung des Standardtexts bzw. der Standardschriftart.

Der Stil wird in Ihrem CSS festgelegt, und JavaScript richtet die Flash-Ersetzung für Ihren Text ein.

Bearbeiten: (Ich empfehle weiterhin, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR die Zeit für ein Projekt verlängert und möglicherweise gewartet werden muss.)

11
Matt

Der Artikel Font-face in IE: Webfonts zum Laufen bringen besagt, dass es mit allen drei Hauptbrowsern funktioniert.

Hier ist ein Beispiel, an dem ich gearbeitet habe: http://brendanjerwin.com/test_font.html

Weitere Informationen finden Sie in Schriftarten einbetten.

10
brendanjerwin

Typeface.js und Cufon sind zwei weitere interessante Optionen. Hierbei handelt es sich um JavaScript-Komponenten, die spezielle Schriftartdaten im JSON-Format (die Sie aus den Formaten TrueType oder OpenType auf ihren Websites konvertieren können) über das neue <canvas> -Element rendern Neuere Browser außer Internet Explorer und über VML im Internet Explorer.

Das Hauptproblem bei beiden ist (ab sofort), dass das Auswählen von Text nicht oder nur sehr umständlich funktioniert.

Trotzdem ist es sehr schön für Schlagzeilen. Körpertext ... Ich weiß es nicht.

Und es ist überraschend schnell.

10
Thomas

Oder Sie könnten versuchen sIFR . Ich weiß, dass es Flash verwendet, aber nur, wenn verfügbar. Wenn Flash nicht verfügbar ist, wird der Originaltext in der Originalschrift (CSS) angezeigt.

8
Casper

Gibt es eine Möglichkeit, eine benutzerdefinierte Schriftart auf einer Website hinzuzufügen, ohne ... Flash zu verwenden?

Klar, benutze Silverlight .

5
TraumaPony

Die vom W3C empfohlene Technik nennt sich "Einbetten" und wird in den folgenden drei Artikeln ausführlich beschrieben: Einbetten von Schriftarten . In meinen begrenzten Experimenten habe ich festgestellt, dass dieser Prozess fehleranfällig ist und nur begrenzte Erfolge bei der Ausführung in einer Umgebung mit mehreren Browsern erzielt.

4
Steve Moyer

Safari und Internet Explorer unterstützen beide die CSS @ -Schriftartenregel, unterstützen jedoch zwei verschiedene eingebettete Schriftarten. Firefox plant, in Kürze denselben Typ wie Apple zu unterstützen. SVG kann Schriften einbetten, wird aber noch nicht so häufig unterstützt (ohne Plugin).

Ich denke, die portabelste Lösung, die ich je gesehen habe, besteht darin, eine JavaScript-Funktion zu verwenden, um Überschriften usw. durch ein Bild zu ersetzen, das auf dem Server mit einer Schriftart Ihrer Wahl generiert und zwischengespeichert wird. Auf diese Weise aktualisieren Sie einfach den Text und müssen dies nicht tun Sachen in Photoshop.

4
zobier

Wenn Sie ASP.NET verwenden, ist es ganz einfach, bildbasierte Schriftarten zu generieren, ohne dass Sie (wie beim Hinzufügen zur installierten Schriftartenbasis) die folgenden Schriftarten auf dem Server installieren müssen:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

und dann mit dieser Schriftart auf ein Graphics zeichnen.

4
mattlant

Es können auch WOFF-Schriften verwendet werden - Beispiel hier

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
3
Wilf

Stellen Sie einfach den Link zu der tatsächlichen Schriftart wie dieser bereit, und Sie können loslegen

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
3
Abhijeet Kumar

Es sieht so aus, als ob es nur im Internet Explorer funktioniert, aber eine schnelle Google-Suche nach "HTML-eingebetteten Schriften" ergibt http://www.spoono.com/html/tutorials/tutorial.php?id=19

Wenn Sie plattformunabhängig bleiben möchten (und sollten!), Müssen Sie Bilder verwenden, oder verwenden Sie einfach eine Standardschriftart.

3
James Muscat

Ich habe ein bisschen recherchiert und ausgegraben Dynamic Text Replacement (veröffentlicht am 15.06.2004).

Diese Technik verwendet Bilder, aber es scheint "Hände frei" zu sein. Sie schreiben Ihren Text und lassen ein paar automatisierte Skripte automatisch auf der Seite suchen und ersetzen.

Es hat einige Einschränkungen, aber es ist wahrscheinlich eine der einfacheren Möglichkeiten (und Browser-kompatibler) als alle anderen, die ich gesehen habe.

3
Kent Fredric

Typeface.js JavaScript Way:

Mit typeface.js können Sie benutzerdefinierte Schriftarten in Ihre Webseiten einbetten, sodass Sie keinen Text in Bildern rendern müssen

Anstatt Bilder zu erstellen oder Flash zu verwenden, um den Grafiktext Ihrer Site in der gewünschten Schriftart anzuzeigen, können Sie typeface.js verwenden und in einfachem HTML und CSS schreiben, als ob Ihre Besucher die Schriftart lokal installiert hätten.

http://typeface.neocracy.org/

2
bakkal

Monotype hat kürzlich viele seiner Schriften veröffentlicht und ein neues System für die Verwendung auf Ihren Webseiten entwickelt: http://www.webfonts.fonts.com/

2
Cogwheel

Weitere Informationen zu alternativen Methoden finden Sie im Artikel 50 nützliche Design-Tools für eine schöne Web-Typografie.

Ich habe nur Cufon verwendet. Ich fand es zuverlässig und sehr einfach zu bedienen, also bin ich dabei geblieben.

2
Blair

Wenn Sie eine Datei mit Ihrer Schriftart haben, müssen Sie weitere Formate dieser Schriftart für andere Browser hinzufügen.

Zu diesem Zweck benutze ich einen Fontgenerator wie Fontsquirrel er stellt alle Fontformate und das @ font-face CSS zur Verfügung, Sie müssen es nur per Drag & Drop in Ihre CSS-Datei ziehen.

2
saadeez

Ich fürchte, Grafik ist in diesem Fall Ihre einzige Option.

1
Ed Brown