Javascript HTML5 Canvas 上的外部字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6117553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
External Font on HTML5 Canvas
提问by cryptic_star
I am completely baffled as to how to change the font I'm using when drawing text on a canvas. The following is the font I have defined in my CSS:
我对如何更改在画布上绘制文本时使用的字体感到非常困惑。以下是我在 CSS 中定义的字体：
@font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
Now in my HTML/JavaScript I'm tempted to say:
现在在我的 HTML/JavaScript 中，我很想说：
context.font = '30px "Officina"';
But this doesn't work. It works fine if I use a web available font (like Arial), and the Officina font shows up fine when I just write plain text directly to the webpage. What am I missing?
但这不起作用。如果我使用网络可用的字体（如 Arial），它工作正常，并且当我直接将纯文本写入网页时，Officina 字体显示正常。我错过了什么？
回答by tomasb
To get cross-browser compatibility you should use CSS for the embedded font like this:
要获得跨浏览器兼容性，您应该像这样为嵌入字体使用 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;
}
Note: I got those font files somewhere at http://fontsquirrel.com
注意：我在http://fontsquirrel.com某处找到了这些字体文件
This is working for me, but I'm using this font also in HTML markup, so maybe a workaround (if the font-face definition doesn't help) can be using that font in some hidden div, of course I'm running all JS after body loads.
这对我有用，但我也在 HTML 标记中使用这种字体，所以也许一种解决方法（如果字体定义没有帮助）可以在某些隐藏中使用该字体div，当然我正在运行所有身体加载后的JS。
回答by JoeManFoo
For folks coming to this question circa 2017 onwards it would be best to use the Web Font Loader that's co-produced by Google and Typekit located here: - https://github.com/typekit/webfontloader
对于大约在 2017 年以后提出这个问题的人，最好使用由 Google 和 Typekit 共同制作的 Web Font Loader，位于此处：- https://github.com/typekit/webfontloader
回答by John Whitley
You can use the Google Web Font loader, but that's rather heavyweight and/or annoying for many uses. Instead, I'll recommend Jennifer Simonds' FontDetect library, available on GitHub:
您可以使用 Google Web Font loader，但这对于许多用途来说相当重量级和/或令人讨厌。相反，我会推荐Jennifer Simonds 的 FontDetect 库，可在 GitHub 上找到：
A JavaScript class you can use to determine whether a webfont got loaded, which font is being used by an element, or react to a webfont getting loaded (or failing to load).
一个 JavaScript 类，可用于确定 webfont 是否已加载，元素正在使用哪种字体，或对 webfont 加载（或加载失败）做出反应。
回答by tcnarss
This is previous question should help you. Drawing text to <canvas> with @font-face does not work at the first time
这是上一个问题，应该对您有所帮助。 第一次使用@font-face 将文本绘制到 <canvas> 不起作用
回答by a paid nerd
NOTE: Outdated as of 2016
注意：截至 2016 年已过时
Use this trickand bind an onerrorevent to an Imageelement.
使用此技巧并将onerror事件绑定到Image元素。
Demo here: http://jsfiddle.net/g6LyK/— works on the latest Chrome.
演示在这里：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);
};
回答by Visal Chhourm
How about try to put your url as a string:
尝试将您的网址作为字符串如何：
@font-face{
font-family:"Officina";
src:url('OfficinaSansStd-Book.otf');
}
context.font = "30px Officina";
