javascript - HTML5 Canvas 上的外部字体

Question

我完全不知道如何更改在 Canvas 上绘制文本时使用的字体。以下是我在 CSS 中定义的字体:

@font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}

现在在我的 HTML/JavaScript 中我很想说:

context.font = '30px "Officina"';

但这行不通。如果我使用网络可用字体(如 Arial)，它工作正常，当我直接将纯文本直接写入网页时，Officina 字体显示正常。我错过了什么？

Answer 1

为了获得跨浏览器的兼容性，你应该像这样为嵌入字体使用 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。