如何在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. correct format for your browser/version？
中是否有正确的文件？
3. 您不是通过它的“实际”字体系列名称来调用它。有时这些可能很奇怪，因此您可能需要使用font viewer或online service进行检查。
4. Ol' man Miedinger正在困扰着你，因为你偷了他最伟大的工作。

我建议您不要使用没有合法许可的字体作为网络字体使用。 :) Google和other vendors很多好的，免费的东西。使用 。

如果您省略font-weight或font-style，显然无关紧要，但您需要确保font-weight和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(); 中。 1}}定义。

然而，奇怪的是，你最终会得到一些奇怪的结果：

normal Griffy

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

你会认为它仍然有足够的合作，但这给了：



让我相信你需要小心，尽可能具有描述性。它为can apparently use 40pt Rye，而10px Sans-Serif只会因默认<canvas id="mycanvas" width="400" height="300"></canvas>​ 而被忽略。

<强> HTML

@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');
}​

<强> CSS

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();​

<强>的Javascript

{{1}}

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