所以问题是,如何在 HTML5 Canvas 中使用“Helvetica Neue Bold Condensed”。
我试过了:
context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";
它们都不起作用。
所以问题是,如何在 HTML5 Canvas 中使用“Helvetica Neue Bold Condensed”。
我试过了:
context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";
它们都不起作用。
有几个不同的事情可能是错误的:
font-family
您可以通过将 设置为另一个纯 HTML 元素来仔细检查它,看看它是否有效。我鼓励您不要使用没有合法许可的字体用作网络字体。 :)
谷歌和其他供应商有很多免费的好东西。使用那个.
font-weight
省略or显然无关紧要font-style
,尽管您需要确保并匹配定义中的font-weight
and 。font-style
@font-face
然而,奇怪的是你最终会得到一些奇怪的结果:
context.font = '40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
http://jsfiddle.net/userdude/tceh5/1/
您会认为它仍然可以使用,但这给出了:
让我相信你需要小心,并且可能尽可能描述。它显然可以使用40pt Rye
,而normal Griffy
只是被默认忽略10px Sans-Serif
。
HTML
<canvas id="mycanvas" width="400" height="300"></canvas>
CSS
@font-face {
font-family: 'Griffy';
font-style: normal;
font-weight: 400;
src: local('Griffy'),
local('Griffy-Regular'),
url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.woff) format('woff');
}
@font-face {
font-family: 'Rye';
font-style: normal;
font-weight: 400;
src: local('Rye Regular'),
local('Rye-Regular'),
url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');
}
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'),
local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
Javascript
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.font = 'normal 40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal 40px Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
context.font = 'normal 40px "Jolly Lodger"';
context.fillText("StackOverflow", 20, 150);
context.fill();