Question

我有一个自定义字体（*.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);
}

提前感谢您的支持！

Answer 1

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

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

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

之后你可以做正常的KineticJS Stuff ..！实际上它必须先使用它加载字体..！我英语不好，但我希望你明白我的观点。另请查看该链接：Github Link

Answer 2

可能已经很晚才回答，但值得一提的是一个完整的例子。

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

＆＃13;

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

＆＃13;

  @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;
}

＆＃13;

<!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>

＆＃13;

非常感谢@luschn的出色回答，因为正如他所说：＆＃34;超时是错误的解决方案＆＃34;。

Answer 3

你可以使用这个旧的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（）来解释某些浏览器异步加载字体。

Answer 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，也应该没问题。

如果在某些浏览器中不起作用，则可能无法正确加载字体。使用超时将是一个糟糕的解决方法imho，你可以尝试在开放的body标签后添加一个隐藏的div：

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

你在那里写什么并不重要（但它一定不能是空的。）

我不再使用Kinetic了，但这对Phaser Engine非常有用。

Answer 5

我遇到了与FontAwesome相同的问题。这是我的解决方案：

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

无需在页面中添加元素。

Answer 6

通过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  
     },
 });

预装字体HTML5，JS，Kinetic.js？

6 个答案: