Wie lade ich externe Schriftarten in ein HTML-Dokument?

Question

Wie lade ich externe Font-Dateien in ein HTML-Dokument.

Beispiel: Machen Sie den Text „bla bla bla bla bla bla bla“ eine eigene Schriftart aus einer TTF-Datei im gleichen Verzeichnis mit HTML CSS und/oder JavaScript

Answer 1

Werfen Sie einen Blick auf diese A List Apart article. Das zugehörige CSS lautet:

@font-face { 
    font-family: "Kimberley"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); 
} 
h1 { font-family: "Kimberley", sans-serif } 

Das oben genannte funktioniert in Chrome/Safari/FireFox. Wie Paul D. Waite in den Kommentaren darauf hingewiesen hat, können Sie es mit IE arbeiten lassen, wenn Sie die Schriftart in die EOT format konvertieren.

Die gute Nachricht ist, dass sich dies in älteren Browsern scheinbar verschlechtert. Wenn Sie also sicher sind, dass nicht alle Benutzer die gleiche Schriftart sehen, ist die Verwendung sicher.

Answer 2

CSS3 bietet eine Möglichkeit, es mit dem zu tun, @ font-face-Regel.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Here ist eine Reihe von verschiedenen Möglichkeiten, die in Browsern funktionieren, die die @ font-face-Regel nicht unterstützen.

Answer 3

In Bezug auf Jay Stevens Antwort: "Die in einer HTML-Datei verfügbaren Schriftarten müssen auf dem Computer des Benutzers vorhanden sein und über den Webbrowser zugänglich sein, es sei denn, Sie möchten die Schriftarten über ein separates externes Gerät an den Computer des Benutzers verteilen Prozess, es kann nicht getan werden. " Das ist richtig.

Aber es gibt einen anderen Weg mit Javascript/Canvas/Flash - sehr gute Lösung gibt Cufon: http://cufon.shoqolate.com/generate/ Bibliothek, die eine sehr einfach zu externen Fonts Methoden zu generieren.

Answer 4

Wenn Sie möchten mehr Browsern als die CSS3 Phantasie unterstützen, können Sie auf der Open-Source-Bibliothek suchen cufon javascript library

Und hier the API ist, wenn Sie mehr funky stuff tun wollen.

Major Pro: Ermöglicht Ihnen zu tun, was Sie wollen/brauchen.

Haupt Con: Sperrt Textauswahl in einigen Browsern, so Verwendung ist sachgemäßer auf Kopftexte (aber Sie können es in all Ihrer Website verwenden, wenn Sie möchten)

Answer 5

Microsoft eine eigene CSS-Methode haben eingebettete Schriften, einschließlich (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), aber das sollte wahrscheinlich nicht empfohlen werden.

Ich habe sIFR zuvor verwendet, wie dies funktioniert super - es verwendet Javascript und Flash, um normalen Text mit etwas Flash dynamisch zu ersetzen, der den gleichen Text in der Schriftart enthält, die Sie möchten (die Schriftart ist in eine Flash-Datei eingebettet). Dies wirkt sich nicht auf das Markup um den Text (es funktioniert mit einer CSS-Klasse), Sie können den Text immer noch auswählen, und wenn der Benutzer Flash nicht hat oder deaktiviert ist, wird es in der Schriftart in beliebiger Schriftart beeinträchtigt Sie spezifizieren in CSS (zB Arial).

Answer 6

Paul Irish hat einen Weg, dies zu tun, der die meisten der üblichen Probleme abdeckt.Sehen Sie seine bullet-proof @font-face article:

Die letzte Variante, die von unnötigen Daten stoppt durch IE heruntergeladen werden und funktioniert in IE8, Firefox, Opera, Safari und Chrome sieht wie folgt aus:

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot'); 
    src: local('Graublau Web Regular'), local('Graublau Web'), 
    url("GraublauWeb.woff") format("woff"), 
    url("GraublauWeb.otf") format("opentype"), 
    url("GraublauWeb.svg#grablau") format("svg"); 
} 

Er hat auch Links zu a generator, die die Schriftarten in alle von Ihnen benötigten Formate übersetzt.

Wie andere bereits angegeben haben, funktioniert dies nur in der neuesten Generation von Browsern. Am besten verwenden Sie dies in Verbindung mit etwas wie Cufon, und laden Sie Cufon nur, wenn der Browser @font-face nicht unterstützt.

Answer 7

Versuchen Sie, diese

<style> 
@font-face { 
     font-family: Roboto Bold Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); 
} 
@font-face { 
     font-family:Roboto Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); 
} 

div1{ 
    font-family:Roboto Bold Condensed; 
} 
div2{ 
    font-family:Roboto Condensed; 
} 
</style> 
<div id='div1' >This is Sample text</div> 
<div id='div2' >This is Sample text</div> 

Answer 8

ich keinen Hinweis auf Raphael.js gesehen haben. Also dachte ich, ich würde es hier aufnehmen. Raphael.js ist bis zum IE5 und einem sehr frühen Firefox sowie allen anderen Browsern abwärtskompatibel. Es verwendet SVG, wenn es möglich ist, und VML, wenn dies nicht möglich ist. Was Sie damit machen, ist auf eine Leinwand zu zeichnen. Bei einigen Browsern können Sie sogar den Text auswählen, der generiert wird. Raphael.js ist hier zu finden:

http://raphaeljs.com/

Es kann so einfach sein Ihr Papier Zeichenbereich wie das Erstellen, in der die Schriftart, Schrift Gewicht, Größe, etc ... und sagte, es dann setzen Sie Ihre Textkette auf dem Papier. Ich bin nicht sicher, ob es um die Lizenzprobleme geht oder nicht, aber es zeichnet den Text, so dass ich ziemlich sicher bin, dass es die Lizenzprobleme umgeht. Aber fragen Sie Ihren Anwalt, um sicherzugehen. :-)