我有一个自定义的字体（ *.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);
}
预先感谢您的支持！
我今天有一个同样的问题..我结束了使用此
<style>
@font-face {
font-family: 'ArchivoBlack-Regular';
src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>
<div style="font-family:'ArchivoBlack-Regular'"> </div>
之后，你可以做你的正常KineticJS东西..！ 其实它必须在使用之前首先安装字体..！ 我不是英语好，但我希望你得到了我的观点。 也看看这个链接： Github的链接
可能已经晚了回答，但它值得有一个完整的例子提。
请注意， 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为他的伟大的答案，因为，他说：“超时是坏的解决方案”。
你可以使用这个老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...
});
注意：您可能必须诉诸$（窗口）.load（）在步骤＃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
}
也应该没有问题，如果你请勿使用动能，当然。
如果它不能在某些浏览器，字体可能无法正确加载。 使用超时将是一个糟糕的解决办法恕我直言，你可以尝试口主体标签后添加一个隐藏的div权：
<div class="font-hack" style="font-family:'your-font';">nothing to see here, move along</div>
不要紧，你写的有（它不能是空的，虽然）。
我不与动力学的工作了，但这个伟大工程与移相器引擎。
我有同样的问题FontAwesome。 这里是我的解决方案：
//wait for fontawsome to load
setTimeout(function(){
kineticStuff();
}, 500);
没有必要的元素添加到您的网页。
通过谷歌的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
},
});
