1

所以问题是,如何在 HTML5 Canvas 中使用“Helvetica Neue Bold Condensed”。


我试过了:

context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";

它们都不起作用。

4

1 回答 1

2

有几个不同的事情可能是错误的:

  1. 您是否包括网络字体(如果您不假设它在您自己的计算机上)?font-family您可以通过将 设置为另一个纯 HTML 元素来仔细检查它,看看它是否有效。
  2. 您的浏览器/版本是否有正确格式的正确文件?
  3. 你不是用它的“实际”字体家族名称来称呼它。有时这些可能很奇怪,因此您可能需要使用字体查看器在线服务进行检查。
  4. 老男人 Miedinger困扰着你,因为你正在窃取他最伟大的作品。

我鼓励您不要使用没有合法许可的字体用作网络字体。 :) 谷歌其他供应商有很多免费的好东西。使用那个.

font-weight省略or显然无关紧要font-style,尽管您需要确保并匹配定义中的font-weightand 。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();​

http://jsfiddle.net/userdude/tceh5/

于 2012-09-16T19:45:59.277 回答