it-swarm.com.de

Wie lade ich externe Schriftarten in ein HTML-Dokument?

Wie lade ich externe Schriftdateien in ein HTML-Dokument?.

Beispiel: Machen Sie den Text "bla bla bla bla bla bla bla" zu einer benutzerdefinierten Schriftart aus einer TTF-Datei im selben Verzeichnis, die HTML CSS und/oder JAVASCRIPT verwendet

53
Eric

Werfen Sie einen Blick auf diesen A List Apart Artikel . Das zugehörige CSS ist:

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

Die oben genannten Funktionen funktionieren in Chrome/Safari/FireFox. Wie Paul D. Waite in den Kommentaren hervorgehoben hat, können Sie es mit IE erreichen, wenn Sie die Schriftart in das EOT-Format konvertieren. 

Die gute Nachricht ist, dass dies bei älteren Browsern scheinbar nachlässt. Solange Sie sich darüber im Klaren sind, dass nicht alle Benutzer dieselbe Schriftart sehen, ist die Verwendung sicher.

82

Paul Irish hat dazu einen Weg, der die meisten der üblichen Probleme abdeckt. Siehe seinen bullet-proof @ font-face-Artikel :

Die letzte Variante, die verhindert, dass unnötige Daten vom IE heruntergeladen werden und in IE8, Firefox, Opera, Safari und Chrome funktioniert, sieht folgendermaßen 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 verlinkt auch mit einem Generator der die Schriften in alle benötigten Formate übersetzt.

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

18
Sean Vieira

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

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

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

Hier gibt es verschiedene Möglichkeiten, um in Browsern zu funktionieren, die die @ font-face-Regel nicht unterstützen.

3
roflwaffle

Zur Antwort von Jay Stevens: "Die zur Verwendung in einer HTML-Datei verfügbaren Schriftarten müssen auf dem Computer des Benutzers vorhanden sein und über den Webbrowser zugänglich sein. Wenn Sie die Schriftarten nicht über einen separaten externen Prozess an den Computer des Benutzers verteilen möchten, ist dies möglich nicht getan werden. " Das ist richtig.

Es gibt jedoch eine andere Möglichkeit, Javascript/Canvas/Flash zu verwenden. Eine sehr gute Lösung gibt cufon: http://cufon.shoqolate.com/generate/ library, die eine sehr einfach zu verwendende Methode für externe Schriftarten generiert.

1
aviv

Wenn Sie mehr Browser als CSS3 unterstützen möchten, können Sie die Open-Source-Bibliothek cufon javascript library betrachten.

Und hier ist die API , wenn Sie mehr funky Sachen machen wollen.

Major Pro: Erlaubt Ihnen zu tun, was Sie wollen/brauchen.

Major Con: Die Textauswahl in einigen Browsern ist nicht zulässig. Daher ist die Verwendung für Kopfzeilentexte angemessen (Sie können sie jedoch in allen Websites verwenden, wenn Sie möchten)

1
jpabluz

Microsoft verfügt über eine proprietäre CSS-Methode zum Einbetten eingebetteter Schriftarten ( http://msdn.Microsoft.com/en-us/library/ms533034(VS.85).aspx ). Dies sollte jedoch wahrscheinlich nicht empfohlen werden.

Ich habe sIFR verwendet, da dies großartig funktioniert - es verwendet JavaScript und Flash, um normalen Text dynamisch durch Flash zu ersetzen, das den gleichen Text in der gewünschten Schriftart enthält (die Schriftart ist in eine Flash-Datei eingebettet). Dies hat keine Auswirkungen auf das Markup um den Text (es funktioniert mithilfe einer CSS-Klasse). Sie können den Text trotzdem auswählen. Wenn der Benutzer Flash nicht deaktiviert oder deaktiviert hat, wird der Text in beliebiger Schriftart zerbrechlich Sie geben in CSS an (zB Arial).

1
Graham Clark

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

http://raphaeljs.com/

Dies kann so einfach sein wie das Erstellen eines Papierzeichnungsbereichs, das Festlegen der Schriftart, der Schriftstärke, der Größe usw., und die Angabe der Zeichenfolge auf dem Papier. Ich bin nicht sicher, ob es um die Lizenzprobleme geht oder nicht, aber es zeichnet den Text. Ich bin also ziemlich sicher, dass es die Lizenzprobleme umgeht. Erkundigen Sie sich bei Ihrem Anwalt. :-)

0
Mark Manning

Versuche dies

<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>
0
Mahendra Jella