HTML5 Canvas 上的外部字体答案

【问题标题】：External Font on HTML5 CanvasHTML5 Canvas 上的外部字体
【发布时间】：2011-09-01 07:58:48
【问题描述】：

对于如何更改在画布上绘制文本时使用的字体，我完全感到困惑。以下是我在 CSS 中定义的字体：

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

现在在我的 HTML/JavaScript 中，我很想说：

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

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

【问题讨论】：

不确定，但也许您需要等到字体加载后才能运行您的 JS？您可以尝试在 DOM 加载后将脚本置于 5 秒超时，然后看看它是否有效（因为字体很可能会在 DOM 加载后 5 秒内加载）。只是一个假设
如何做到这一点？我对 DOM 不是很熟悉。
试着做 document.body.onload = function(){ setTimeout(function(){ /* 你所有的代码在这里 */ },5000) };这不会等待 DOM 加载，但它会关闭

标签： javascript html canvas fonts

【解决方案1】：

这是上一个问题应该对您有所帮助。 Drawing text to <canvas> with @font-face does not work at the first time

【讨论】：

所以我尝试在我的所有 JS 之前添加一个带有一些文本的<div>，但无济于事。您可以看到它here - 白框上方的文本是正确的字体，“计算机”一词是无衬线（应该是），但另一个文本框也是无衬线，但已定义作为Officina。

【解决方案2】：

要获得跨浏览器兼容性，您应该使用 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。

【讨论】：

【解决方案3】：

注意：截至 2016 年已过时

使用this trick 并将onerror 事件绑定到Image 元素。

此处的演示：http://jsfiddle.net/g6LyK/ — 适用于最新的 Chrome。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow';
document.getElementsByTagName('head')[0].appendChild(link);

// Trick from https://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};

【讨论】：

@KarelBílek 已确认，但我目前没有时间更新。

【解决方案4】：

您可以使用 Google Web 字体加载器，但对于许多用途而言，这相当繁重和/或烦人。相反，我会推荐Jennifer Simonds' FontDetect library，可以在 GitHub 上找到：

一个 JavaScript 类，您可以使用它来确定是否加载了 webfont、元素正在使用哪种字体，或者对 webfont 加载（或加载失败）做出反应。

【讨论】：

【解决方案5】：

尝试将您的网址作为字符串如何：

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

context.font = "30px Officina";

【讨论】：

声明“我不确定它是否有效，但只是尝试一下”立即揭示了您问题的主要问题。

【解决方案6】：

对于大约在 2017 年以后提出这个问题的人，最好使用由 Google 和 Typekit 共同制作的 Web Font Loader，位于此处： - https://github.com/typekit/webfontloader

【讨论】：