开发者

Load external font with javascript and jquery

I have a < p > element created dynamically with jquery, and I want to style it with a custom font that I have on my hard drive.

Could you sugest me a method to load that font and apply it to this element.

Right now, the object looks something like:

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

I want to replace fontFamily : "Arial" with my custom font.

开发者_运维知识库

Thanks, Gabriel


This piece of code does all the job:

$("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>");


I found a good solution using fontface plugin for jquery. http://www.sitepoint.com/the-fontface-jquery-plugin/


You will need to add some CSS to your style sheet - You can find the right CSSS to add here: How do I load external fonts into an HTML document?

You can then change the font name with whatever its called eg:

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

EDIT: What would be better is to add a class in your stylesheet for the

tag and then add that class to to your p with jquery

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

$("<p>").addClass("example");


Personally I use cufon.

Works on 99% of browsers out there!

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

Enjoy!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜