[英]External Font on HTML5 Canvas
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:我完全不知道如何更改我在 canvas 上绘制文本时使用的字体。以下是我在 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.
如果我使用 web 可用字体(如 Arial),它工作正常,当我直接将纯文本直接写入网页时,Officina 字体显示正常。 What am I missing?
我错过了什么?
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。
You can use the Google Web Font loader, but that's rather heavyweight and/or annoying for many uses. 您可以使用Google Web字体加载器,但这对于许多用途而言相当重量级和/或烦人。 Instead, I'll recommend Jennifer Simonds' FontDetect library , available on GitHub:
相反,我会推荐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加载(或无法加载)做出反应。
对于大约2017年以后出现这个问题的人来说,最好使用由Google和Typekit共同制作的Web Font Loader: - https://github.com/typekit/webfontloader
This is previous question should help you. 这是以前的问题应该对你有帮助。 Drawing text to <canvas> with @font-face does not work at the first time
使用@ font-face将文本绘制到<canvas>在第一次时不起作用
You can load fonts with the FontFace API before using it in the canvas:在 canvas 中使用它之前,您可以使用FontFace API加载 fonts:
// 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');
});
The font resource myfont.woff2 is first downloaded.首先下载字体资源myfont.woff2。 Once the download completes, the font is added to the document's FontFaceSet.
下载完成后,字体将添加到文档的 FontFaceSet 中。
The specification of the FontFace API is a working draft at the time of this writing. FontFace API 的规范是撰写本文时的工作草案。 See browser compatibility table here .
请在此处查看浏览器兼容性表。
Then, you can use the font parameter to set your font family.然后,您可以使用字体参数来设置您的字体系列。
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);
};
Note:笔记:
You can simply load your font using "@font-face" CSS, but remember, before you draw on canvas, your font must be loaded to the document.您可以简单地使用“@font-face”CSS 加载您的字体,但请记住,在您使用 canvas 绘图之前,您的字体必须加载到文档中。
All of your fonts and images (actually all resources) should be and must be within the same origin or cors-origin enabled, otherwise most of the browser will reject the.network request.你所有的 fonts 和图片(实际上是所有资源)应该而且必须是同源的或者启用 cors-origin ,否则大多数浏览器会拒绝 .network 请求。
Use this trick and bind an onerror
event to an Image
element. 使用此技巧并将
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);
};
How about try to put your url as a string: 如何尝试将您的网址作为字符串:
@font-face{
font-family:"Officina";
src:url('OfficinaSansStd-Book.otf');
}
context.font = "30px Officina";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.