javascript - 如何在 HTML5 Canvas 中使用“Helvetica Neue Bold Condensed”

Question

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

---

我试过了：

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

它们都不起作用。

Answer 1

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

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/