HTML5 Canvas 上的外部字体

Question

我完全困惑于如何更改在画布上绘制文本时使用的字体。以下是我在 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。

Answer 2

对于 2017 年左右遇到这个问题的人来说，最好使用由 Google 和 Typekit 联合制作的 Web Font Loader，位于此处：
- https://github.com/typekit/webfontloader

Answer 3

这是上一个问题，应该对您有帮助。
将文本绘制到 < ;画布>第一次使用@font-face 不起作用

Answer 4

您可以使用 Google Web Font 加载器，但这对于许多用途来说相当重量级和/或烦人。相反，我会推荐 Jennifer Simonds 的 FontDetect 库，可在 GitHub 上找到：

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

Answer 5

在使用之前，您可以使用 FontFace API 加载字体画布：

// new FontFace(familyName, fontSrc, descriptorOnly)
const myFont = new FontFace('My Font', 'url(https://myfont.woff2)');

myFont.load().then((font) => {
  document.fonts.add(font);

  console.log('Font loaded');
});

首先下载字体资源 myfont.woff2。下载完成后，字体将添加到文档的 FontFaceSet 中。

在撰写本文时，FontFace API 的规范还是一个工作草案。 请参阅此处的浏览器兼容性表。

然后，您可以使用字体参数来设置您的字体系列。

var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};

注意：

1. 您可以简单地使用“@font-face”CSS 加载字体，但请记住，在画布上绘制之前，必须将字体加载到文档中。

2. 你的所有字体和图像（实际上是所有资源）应该并且必须处于同源或启用 cors-origin，否则大多数浏览器将拒绝网络请求。

Answer 6

注意：自 2016 年起已过时

使用此技巧并将 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);
};

Answer 7

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

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

context.font = "30px Officina";