2

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

提前感谢您的支持！

4

6 回答 6

10

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

<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

于 2013-05-03T18:32:47.080 回答
4

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

请注意，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 的出色回答，因为正如他所说：“超时是不好的解决方案”。

于 2016-02-23T15:24:32.293 回答
3

它通常适用于所有浏览器，您只需要正确使用字体。只需使用这样的生成器：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 非常有用。

于 2013-04-12T14:25:45.780 回答
3

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

向指定 Barcode 字体的页面添加隐藏元素

<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() 来解决某些浏览器异步加载字体的问题。

于 2013-03-21T21:32:22.800 回答
2

I had the same problem with FontAwesome. Here is my solution:

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

No need to add an element to your page.

于 2014-06-03T12:36:38.870 回答
1

通过谷歌的 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  
     },
 });
于 2015-06-24T04:10:01.597 回答