Nik*_*Nik 2 html fonts canvas kineticjs
我有一个自定义字体(*.ttf),我用来在HTML画布上使用Kinetic.js编写文本.
不幸的是,在第一次加载页面时,它没有使用我的自定义字体,重新加载页面时一切都很好.
我可以以某种方式预加载字体吗？
我试过这个,但仍然没有工作:
<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">
我可以告诉Kinetic.js以某种方式预加载吗？
字体在我的CSS中定义如下:
@font-face {
font-family: "Barcode";
src: url(../font/IDAutomationHC39M.ttf);
}
在此先感谢您的支持!
cas*_*123 10
我今天遇到了同样的问题..我最终使用了这个
<style>
@font-face {
font-family: 'ArchivoBlack-Regular';
src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>
<div style="font-family:'ArchivoBlack-Regular'"> </div>
在那之后你可以做正常的KineticJS Stuff ..!实际上它必须先使用它加载字体..!我英语不好,但我希望你明白我的观点.还看看那个链接:Github Link
也许现在回答已经晚了，但值得一提的是一个完整的例子。
请注意，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 的出色回答，因为正如他所说：“超时是糟糕的解决方案”。