HTML5 Canvas上的外部字体 [英] External Font on HTML5 Canvas

问题描述

我完全不知道如何改变我在画布上绘制文字时使用的字体。以下是我在CSS中定义的字体：

  @ font-face {
 font-family： Officina; 
 src：url（OfficinaSansStd-Book.otf）; 
} 
  

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

  context.font ='30pxOfficina'; 
  

但这不起作用。它工作正常，如果我使用网络可用的字体（如Arial），并且Officina字体显示得很好，当我只是直接写入纯文本到网页。

为了获得跨浏览器兼容性，你应该使用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标记，所以也许一个解决方法（如果font-face定义没有帮助）可以使用该字体在一些隐藏 div ，当然我正在运行所有JS后身体负载。

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:

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

Now in my HTML/JavaScript I'm tempted to say:

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?

解决方案

To get cross-browser compatibility you should use CSS for the embedded font like this:

@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

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.

这篇关于HTML5 Canvas上的外部字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！