预加载字体HTML5，JS，Kinetic.js？ [英] Preload font HTML5, JS, Kinetic.js?

问题描述

我有一个自定义字体（ *。ttf ），我使用通过Kinetic.js在HTML画布上书写文本。

不幸的是，在第一次加载页面时，它没有使用我的自定义字体，当重新加载页面一切都很好。

$ b

我已经尝试过了，但仍然无法正常工作：

c $ c>< link rel =prefetchhref =resource / font / IDAutomationHC39M.ttf>

我能告诉Kinetic.js以某种方式预载吗？

字体在我的CSS中是这样定义的：

  @ font-face {
 font-family：Barcode; 
 src：url（../ font / IDAutomationHC39M.ttf）; 
} 
  

感谢您的支持！

<我最后使用这个

 <$ c> 
 $ c>< style> 
 @ font-face {
 font-family：'ArchivoBlack-Regular'; 
 src：url（'../ fonts / ArchivoBlack-Regular.ttf'）; 
} 
< / style> 
 
< div style =font-family：'ArchivoBlack-Regular'>& nbsp;< / div> 
  

之后，你可以做正常的KineticJS Stuff ..实际上它是必要的加载字体之前使用它..！我不好英语，但我希望u得到我的观点。还可以查看该链接： Github Link

I have a custom font (*.ttf), that I am using to write text on the HTML canvas using Kinetic.js.

Unfortunately, on the first loading of the page it is not using my custom font, when reloading the page all is good.

Can I preload the font somehow?

I have tried this, but still not working:

<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">

Can I tell Kinetic.js to preload it somehow?

The font is defined in my CSS like this:

@font-face {
    font-family: "Barcode";
    src: url(../font/IDAutomationHC39M.ttf);
}

Thanks in advance for your support!

解决方案

I had a same problem today.. I ended up using this

<style>
@font-face {
    font-family: 'ArchivoBlack-Regular';
    src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>

<div style="font-family:'ArchivoBlack-Regular'">&nbsp;</div>

After that you can do you normal KineticJS Stuff..! Actually its necessary to Load the Font first before using it..! I'm not good in English, but i hope u got my point. Also have a look at that link: Github Link

这篇关于预加载字体HTML5，JS，Kinetic.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！