当我在带有通过@ font-face加载的字体的画布上绘制文本时,文本无法正确显示.它根本不显示(在Chrome 13和Firefox 5中),或者字体错误(Opera 11).此类意外行为仅在第一次使用字体绘图时发生.之后一切正常.
这是标准行为还是什么?
谢谢.
PS:以下是测试用例的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@font-face and <canvas></title>
<style id="css">
@font-face {
font-family: 'Press Start 2P';
src: url('fonts/PressStart2P.ttf');
}
</style>
<style>
canvas, pre {
border: 1px solid black;
padding: 0 1em;
}
</style>
</head>
<body>
<h1>@font-face and <canvas></h1>
<p>
Description: click the button several times, and you will see the problem.
The first line won't show at all, or with a wrong typeface even if it does.
<strong>If you have visited …
Run Code Online (Sandbox Code Playgroud) 我想在Chart JS中使用外部字体.有谁知道这是否可能?我通过文档搜索过,但我还没有找到解决方案.
在查看问题时,我从未找到对上述内容的明确答案.我想要一种适用于几乎所有平台的方法.所以为了社区的利益,我想我会分享我在使用自定义字体在画布上工作的成功.我的主要问题是,什么是让所述字体工作的万无一失的方法?我尝试了多种方法,比如只使用CSS样式表,但它比这复杂一点.这是我发现的:
我有一个自定义字体(*.ttf
),我用来在HTML画布上使用Kinetic.js编写文本.
不幸的是,在第一次加载页面时,它没有使用我的自定义字体,重新加载页面时一切都很好.
我可以以某种方式预加载字体吗?
我试过这个,但仍然没有工作:
<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">
Run Code Online (Sandbox Code Playgroud)
我可以告诉Kinetic.js以某种方式预加载吗?
字体在我的CSS中定义如下:
@font-face {
font-family: "Barcode";
src: url(../font/IDAutomationHC39M.ttf);
}
Run Code Online (Sandbox Code Playgroud)
在此先感谢您的支持!