用javascript和jquery加载外部字体 [英] Load external font with javascript and jquery

问题描述

我有一个< p>使用jquery动态创建的元素，我想用我自己的硬盘驱动器中的自定义字体来设计它。

你可以加载一个方法来加载字体并将其应用于此元素。

现在，对象看起来像这样：

  $（
）。css（{fontFamily：Arial，
 fontSize：13px，
 color：＃000}） 
  

我想用我的自定义字体替换fontFamily：Arial。

感谢，
Gabriel

解决方案

这段代码完成所有工作： / p>

  $（head）。prepend（< style type = \text / css \> + 
@ font-face {\ n+ 
\tfont-family：\myFont\; \\\
+ 
\ tsrc：local （'☺'），url（'myFont.otf'）格式（'opentype'）; \\\
+ 
} \\\
+ 
\tp.myClass {\ n+ 
\tfont-family：myFont！important; \\\
+ 
} \\\
+ 
< / style>）; 
  

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

这篇关于用javascript和jquery加载外部字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！