javascript - 如何轻松地将自定义字体放入 HTML5 Canvas 中？

Question

在浏览问题时，我从未找到上述问题的明确答案。我想要一种适用于几乎所有平台的方法。因此，为了社区的利益，我想分享我在让自定义字体在 canvas 中工作方面取得的成功。我的主要问题是，什么是让上述字体正常工作的可靠方法？我尝试了多种方法，例如只使用 CSS 样式表，但比这要复杂一些。这是我发现的:

Answer 1

更新:此解决方案 now works在除 IE 11 及以下版本之外的所有浏览器上。

虽然它没有完全支持，但您现在可以使用 FontFace在 Canvas 上使用字体之前显式加载字体的 API。

var f = new FontFace('Font name', 'url(/path/to/font.ttf)');

f.load().then(function(font) {

  // Ready to use the font in a canvas context
  console.log('font ready');

  // Add font on the html page
  document.fonts.add(font);

  ctx.font = '48px Font name';
  ctx.strokeText('Hello world', 100, 100);

});

我可以确认这适用于 Chrome 61.0.3163.100、Safari 11.0 (12604.1.38.1.7)、Firefox 56.0(所有 OSX)和 Safari iOS 11.1。