1

我无法加载我的 Google 字体。我试图让它用三种不同的方法加载，标准、@import 和 JavaScript，但没有结果可循。虽然如果我使用 KineticJS 框架运行补间，字体会同时加载并且看起来很好。

我的代码看起来像这样。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Hanalei::latin' ] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })(); </script>
    </head>
    <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
    <script defer="defer">
    var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 600
    });

  var layer = new Kinetic.Layer();

    var text1 = new Kinetic.Text({
    x: 100,
    y: 100,
    text: 'Test',
    fontSize: 20,
    fontFamily: 'Hanalei',
    fill: 'black'
  });


  layer.add(text1);
  stage.add(layer);

</script>

4

3 回答 3

2

我对 FontAwesome 也有同样的问题。这是我的解决方案：

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

无需做任何其他事情。

于 2014-06-03T12:40:59.863 回答
1

As @JohnnyJS says, you must let your fonts fully load before using them.

By setting wf.async='true' you are telling the browser to continue loading Kinetic while it downloads the font in the background.

Therefore your kinetic text is rendered before the font is available.

You can set wf.async='false' and webfontJS will wait for the font to load before continuing to load Kinetic.

Therefore the font will be fully loaded and available when kinetic.text needs it.

However, with wf.async='false' the browser is halted while the font loads.

If you want to use async, you should define the active callback in WebFontConfig.

The active callback is triggered after the font is fully loaded.

So you would begin building your kinetic.text in response to that callback, knowing the font was fully available.

于 2013-08-25T19:43:17.423 回答
0

onload在初始化阶段之前使用事件。

（您需要页面中实际加载的字体才能在画布上进行动态绘制。）

正如你所问的那样，我以很久以前发现的一些很棒的方式加载图像。

$(document).ready(function(){
    function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}
function initStage(images) {
// create awesome stuff....
}

sources = {
brain: "res/brain.png",
f_body_blue_glow: "res/f-body-blue-glow.png",
f_body_blue: "res/f-body-blue.png",
f_body_green: "res/f-body-green.png"
}
loadImages(sources,initStage);
});

这是专门针对图像的，但我认为几乎不需要修改它就可以用于任何资产，因此将 jquery$.get()用于 google 字体，并在处理程序中调用回调（例如initStage()）

祝你好运。

于 2013-08-25T19:13:40.500 回答