我完全不知道如何更改在 Canvas 上绘制文本时使用的字体。以下是我在 CSS 中定义的字体:
@font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
现在在我的 HTML/JavaScript 中我很想说:
context.font = '30px "Officina"';
但这行不通。如果我使用网络可用字体(如 Arial),它工作正常,当我直接将纯文本直接写入网页时,Officina 字体显示正常。我错过了什么?
最佳答案
为了获得跨浏览器的兼容性,你应该像这样为嵌入字体使用 CSS:
@font-face {
font-family: 'BankGothicMdBTMedium';
src: url('bankgthd-webfont.eot');
src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
font-weight: normal;
font-style: normal;
}
注意:我在 http://fontsquirrel.com 的某处获得了这些字体文件
这对我有用,但我也在 HTML 标记中使用这种字体,所以也许一种解决方法(如果字体定义没有帮助)可以在一些隐藏的 div< 中使用该字体
,当然我在主体加载后运行所有 JS。
关于javascript - HTML5 Canvas 上的外部字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6117553/