logo标签列表

预加载字体HTML5，JS，Kinetic.js？

htmlcanvasfontskineticjs
3
我有一个自定义字体（*.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中吗？ - btevfik
在HTML的head标签中，您加载所有内容的顺序是什么？ - bart s
你的字体是否在外部CSS中？如果没有，请将其放在那里并尝试。 - btevfik
你也可以尝试在canvas元素之前放置一个div，使字体加载 <div style="font-family: myFont"></div>。 - btevfik
应该有一种方法让你加载字体，等页面准备好后再绘制画布。尝试使用JQuery的.ready()函数，并将所有的KineticJS代码放在其中。这样，你的画布将在页面加载后绘制，就像等待加载图像然后在画布上绘制它一样。 - SoluableNonagon
显示剩余2条评论
6个回答
11

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

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

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

之后您可以进行您的普通KineticJS操作..! 实际上在使用之前先加载字体是必要的..! 我的英语不好，但我希望您能理解我的意思。同时，请查看该链接: Github链接

5

也许现在回答有些晚了，但是提供一个完整的例子还是值得一提。

请注意，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提供的出色答案，因为他指出：“超时是不好的解决方案”。
4
通常情况下，它可以在所有浏览器中正常工作，您只需要正确使用font-face即可。只需使用诸如此类的生成器：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，那么也应该没有问题。

如果在某些浏览器中无法正常工作，则可能是字体未正确加载。使用超时会是一个不好的解决方法，您可以尝试在开头body标记后添加一个隐藏的div：

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

无论您在那里写什么（但不能为空），都没有关系。

我不再使用Kinetic，但它与Phaser引擎非常兼容。

有没有一个 jsbin 的例子可以提供更详细的解释？ - Mahdi Alkhatib
这就是你所需要的所有代码，之后在创建文本元素时只需设置正确的 fontFamily 即可。 - andyrandy
我正在尝试使用Font Awesome，但没有成功，请看这是我的尝试：https://jsbin.com/ditihivoqo/edit?html,output - Mahdi Alkhatib
请注意，Kinetic与Konva相同。 - Mahdi Alkhatib
对我来说运行良好，我可以在右侧屏幕上看到自行车图标...？ - andyrandy
显示剩余5条评论
4
您可以使用这个旧的CSS技巧来强制字体可用：
在页面中添加一个隐藏元素来指定条形码字体。
<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()来处理某些浏览器异步加载字体的情况。
2

通过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  
     },
 });
2
我曾经遇到过FontAwesome的类似问题。这是我的解决方案：
//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

无需向您的页面添加元素。
超时是非常糟糕的解决方法，通常可以避免使用。请查看我的答案，您只需要添加一个额外的div作为“字体黑科技”。在kinetic/konva或phaser中效果很好。 - andyrandy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接