Wie lade ich externe Schriftarten in ein HTML-Dokument?

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

Beispiel:
Der text "blah blah blah blah blah blah blah" eine eigene Schrift aus einer TTF-Datei in das gleiche Verzeichnis mit HTML, CSS und/oder JAVASCRIPT

InformationsquelleAutor der Frage Eric | 2010-02-10

  1. 76

    Werfen Sie einen Blick auf diese A List Apart Artikel. Die dazugehörige CSS:

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

    Den oben funktioniert in Chrome/Safari/FireFox. Als Paul D. Waite wies darauf hin, in den Kommentaren können Sie es auf Arbeit mit dem IE, wenn Sie konvertieren Sie die schriftart auf die EOT-format.

    Die gute Nachricht ist, dass dies scheint zu degradieren anmutig in älteren Browsern, solange man sich dessen bewusst und bequem mit der Tatsache, dass nicht alle Nutzer sehen die gleiche schriftart, es ist sicher zu verwenden.

    InformationsquelleAutor der Antwort Chris Van Opstal

  2. 16

    Paul Irish hat einen Weg, das zu tun, deckt die meisten common Probleme. Siehe seine Kugel-Beweis @font-face-Artikel:

    Die Letzte Variante, die Haltestellen unnötig Daten heruntergeladen werden von IE 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 auch links zu einer generator, übersetzen die Schriften in allen Formaten, die Sie brauchen.

    Als andere bereits angegeben haben, dies funktioniert nur in der neuesten generation von Browsern. Ihre beste Wette ist, um damit in Verbindung mit so etwas wie Cufon und nur laden, Cufon, wenn der browser nicht unterstützen @font-face.

    InformationsquelleAutor der Antwort Sean Vieira

  3. 3

    CSS3 bietet einen Weg, es zu tun mit der @font-face-Regel.

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

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

    Hier ist eine Reihe von verschiedenen Möglichkeiten, die Arbeit wird in Browsern, die keine Unterstützung für die @font-face-Regel.

    InformationsquelleAutor der Antwort roflwaffle

  4. 1

    Bezüglich Jay Stevens Antwort: "Die verfügbaren Schriftarten für die Verwendung in einer HTML-Datei haben, die auf dem Computer des Benutzers und Internet von der web-browser, so, wenn Sie wollen, verteilen Sie die Schriftarten auf den Computer des Nutzers über eine separate externe Prozess, es kann nicht getan werden." Das stimmt.

    Aber es gibt eine Möglichkeit mit javascript /canvas /flash - sehr gute Lösung gibt cufon: http://cufon.shoqolate.com/generate/ - Bibliothek, erzeugt ein sehr einfach zu bedienen, externe Schriftarten Methoden.

    InformationsquelleAutor der Antwort aviv

  5. 1

    Wenn Sie möchten, unterstützt mehr Browser als die CSS3 Phantasie, Sie können sich an der open-source-Bibliothek cufon javascript-Bibliothek

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

    Größeren Pro: Ermöglicht Ihnen, das zu tun, was Sie wollen /brauchen.

    Großen Con: Verbietet die Auswahl von text in manchen Browsern zu verwenden, so ist zweckmäßig, die auf header-Texte (aber Sie können es verwenden, in der Sie alle Ihre Website, wenn Sie möchten)

    InformationsquelleAutor der Antwort jpabluz

  6. 1

    Microsoft eine proprietäre CSS-Methode mit eingebetteter Schriften (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), aber das sollte wohl nicht empfohlen werden.

    Ich verwendet habe, sIFR vor, wie dies funktioniert - es verwendet Javascript und Flash, um dynamisch ersetzen Sie normalen text, mit einigen Flash mit demselben text in der schriftart, die Sie wollen (die Schrift ist eingebettet in eine Flash-Datei). Dies berührt nicht das markup, um den text (es arbeitet mit einer CSS-Klasse), können Sie immer noch wählen Sie den text, und wenn der Benutzer kein Flash hat oder es deaktiviert, es wird sich verschlechtern anmutig auf den text in welcher schriftart, die Sie angeben, in CSS (z.B. Arial).

    InformationsquelleAutor der Antwort Graham Clark

  7. 0

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

    InformationsquelleAutor der Antwort Developer MJ

  8. 0

    Habe ich nicht finden jede Bezugnahme auf Raphael.js. Also ich dachte, ich würde es mit einschließen hier. Raphael.js ist rückwärts kompatibel mit allen der Weg zurück in IE5 und eine sehr frühe Firefox als auch der rest der Browser. Es verwendet SVG als es kann und VML, wenn Sie es nicht können. Was Sie tun ist es zu ziehen, auf eine Leinwand. Manche Browser lassen auch Sie markieren Sie den text, der generiert wird. Raphael.js kann hier gefunden werden:

    http://raphaeljs.com/

    Es kann so einfach wie das erstellen Ihrer Papier-Zeichnung-Bereich, Angabe der schriftart, Gewicht, Größe, etc... und dann erzählen Sie, setzen Sie Ihren text auf das Papier. Ich bin nicht sicher, wenn es um die Lizenzierung oder nicht, aber es ist die Zeichnung den text, so bin ich ziemlich sicher, dass es nicht zu umgehen, die Lizenz-Probleme. Aber überprüfen Sie mit Ihrem Anwalt, um sicher zu sein. 🙂

    InformationsquelleAutor der Antwort Mark Manning

Schreibe einen Kommentar