预加载字体 HTML5、JS、Kinetic.js？答案

【问题标题】：Preload font HTML5, JS, Kinetic.js?预加载字体 HTML5、JS、Kinetic.js？
【发布时间】：2013-03-10 13:17:02
【问题描述】：

我有一个自定义字体 (*.ttf)，我正在使用 Kinetic.js 在 HTML 画布上编写文本。

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

我可以预加载字体吗？

我试过了，但还是不行：

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

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

字体在我的 CSS 中定义如下：

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

提前感谢您的支持！

【问题讨论】：

这个问题只发生在 kinetic.js 中吗？
您在html 的head 标记中按什么顺序加载所有内容？
将其全部加载到 head 标签中。不要认为它的 Kinetic.js 是特定的。似乎更有可能与 HTML 画布有关，它可以只使用已加载的字体，否则它会退回到默认值。有什么想法吗？
你的字体是在外部 CSS 中吗？如果不放在那里试试
你也可以尝试在canvas元素之前放置一个div来加载字体<div style="font-family: myFont"></div>

标签： html canvas fonts kineticjs

【解决方案1】：

可能回答晚了，但值得一提的是完整的例子。

请注意，KonvaJS 派生自 KeneticJS 并受支持，但不再支持 Keneticjs。

window.onload = function () {
var stage = new Konva.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Konva.Layer();

    var simpleText = new Konva.Text({
      x: stage.getWidth() / 10,
      y: 15,
      text: "\uf21c",
      fontSize: 300,
      fontFamily: 'FontAwesome',
      fill: 'green'
    });
  layer.add(simpleText);
  stage.add(layer);
  
}

  @font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>

非常感谢@luschn 的出色回答，因为正如他所说：“超时是不好的解决方案”。

【讨论】：

【解决方案2】：

它通常适用于所有浏览器，您只需要正确使用字体。只需使用这样的生成器：http://www.fontsquirrel.com/tools/webfont-generator

它创建一个包含 4 个字体文件（eot、svg、ttf、woff）的 zip 文件，并且有一个带有必要代码的 css 文件：

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

我正在使用 KineticJS，当我在页面加载后创建舞台时，它使用正确的字体：

window.onload = function () {
    var stage = new Kinetic.Stage({
            container: 'container',
            width: 800,
            height: 600
    });
    //code for creating a layer, text and whatnot with kinetic
}

当然，如果您不使用 Kinetic，也应该没问题。

如果它在某些浏览器中不起作用，则字体可能无法正确加载。恕我直言，使用超时将是一个不好的解决方法，您可以尝试在开始的正文标记之后添加一个隐藏的 div：

<div class="font-hack" style="font-family:'your-font';">nothing to see here, move along</div>

你在那里写什么并不重要（但它不能为空）。

我不再使用 Kinetic，但是这对 Phaser Engine 很有效。

【讨论】：

有没有jsbin的例子来解释一下？
这就是您需要的所有代码，之后您只需要在创建文本元素时设置正确的 fontFamily 即可。
我正在尝试将它与 Font Awesome 一起使用，但没有运气，这是我的尝试：jsbin.com/ditihivoqo/edit?html,output
请注意 Kinetic 与 Konva 相同
对我来说很好用，我可以在右侧屏幕上看到自行车图标...？

【解决方案3】：

通过 Google 的 webfontloader https://github.com/typekit/webfontloader

testStrings 需要用于确定是否已加载带有字形的字体。如果您的字体没有字形或自定义子集，则无需使用 testStrings

 WebFont.load({
     custom: {
         families: ['fontFamily1'],
         testStrings: {
             'fontFamily1': '\uE600'
         },
     },
     timeout: 5000 // Set the timeout to five seconds
         ,
     fontactive: function(familyName, fvd) {
        // the font have been loaded and now you can do what you want
     },
     fontinactive: function(familyName, fvd) {
         // the font could not be loaded  
     },
 });

【讨论】：

【解决方案4】：

我在使用 FontAwesome 时遇到了同样的问题。这是我的解决方案：

//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

无需向您的页面添加元素。

【讨论】：

超时是非常糟糕的解决方法，您通常可以避免它们。看看我的回答，你只需要一个额外的 div 作为“font hack”。与动力学/康瓦或移相器配合使用效果很好。

【解决方案5】：

我今天遇到了同样的问题..我最终使用了这个

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

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

之后你就可以做你正常的 KineticJS 东西了..！实际上它需要在使用之前先加载字体..！我英语不好，但我希望你明白我的意思。也看看那个链接：Github Link

【讨论】：

【解决方案6】：

您可以使用这个旧的 css hack 来强制字体可用：

在指定条码字体的页面中添加隐藏元素

<span id="mustLoadMe">

然后在 CSS 中：

#mustLoadMe
{
    visibility: hidden;
    position: absolute;
    font-family: Barcode, Arial, Sans-serif;
}

最后，使用 jQuery 等待字体加载，然后在画布中绘制文本。

$("#mustLoadMe").load(function() {
       // do your canvas stuff here because the font should be loaded now...
});

注意：您可能不得不在上面的第 3 步中使用 $(window).load() 来解决某些浏览器异步加载字体的问题。

【讨论】：