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!
精彩评论