Laden Sie externe Schriftarten mit javascript und jquery

Ich habe eine < p > - element dynamisch erstellt mit jquery, und ich möchte es Stil mit einer benutzerdefinierten schriftart, die ich haben auf meiner Festplatte.

Konnte Sie sugest mir eine Methode zu laden, die schriftart und wenden Sie es auf dieses element.

Gerade jetzt, sieht das Objekt etwa so aus:

$("<p>").css({ fontFamily : "Arial",
               fontSize: "13px",
               color: "#000"});

Möchte ich ersetzen fontFamily : "Arial" mit meiner benutzerdefinierten schriftart.

Dank,
Gabriel

InformationsquelleAutor gabitzish | 2011-09-02
  1. 22

    Diesem Stück code, das macht die ganze Arbeit:

    $("head").prepend("<style type=\"text/css\">" + 
                                "@font-face {\n" +
                                    "\tfont-family: \"myFont\";\n" + 
                                    "\tsrc: local('☺'), url('myFont.otf') format('opentype');\n" + 
                                "}\n" + 
                                    "\tp.myClass {\n" + 
                                    "\tfont-family: myFont !important;\n" + 
                                "}\n" + 
                            "</style>");
    InformationsquelleAutor gabitzish
  2. 4

    Fand ich eine gute Lösung mit fontface-plugin für jquery.
    http://www.sitepoint.com/the-fontface-jquery-plugin/

    InformationsquelleAutor gabitzish
  3. 2

    Müssen Sie einige CSS-Stylesheet - finden Sie den richtigen CSSS hier hinzufügen: Wie lade ich externe Schriftarten in ein HTML-Dokument?

    Können Sie dann ändern Sie den Namen der schriftart, mit was auch immer seine genannt, z.B.:

    $("<p>").css({ fontFamily : "Kimberley",
               fontSize: "13px",
               color: "#000"});

    EDIT:, Was besser wäre, ist das hinzufügen einer Klasse in Ihrem stylesheet für die

    tag und dann fügen Sie die Klasse an, um Ihre p mit jquery

    p.example{ font-family:Arial, Helvetica, sans-serif; }

$("<p>").addClass("example");
    • Es wird kein stylesheet. Alles wird in diesem .js-Datei.
    • das ist aber nicht die Antwort darauf, was er fragte.
    InformationsquelleAutor 472084
  4. 1

    Ich persönlich verwende cufon.

    Funktioniert auf 99% der Browser, den es gibt!

    http://cufon.shoqolate.com/generate/

    Genießen!

    InformationsquelleAutor Graeme Leighfield
Schreibe einen Kommentar