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. Web フォントを含めていますか(自分のコンピューター上にあると想定していない場合)。font-familyを別のプレーンな HTML 要素に設定することで、これを再確認し、動作するかどうかを確認できます。
  2. お使いのブラウザ/バージョンに適した形式の適切なファイルがありますか?
  3. 「実際の」フォントファミリー名で呼んでいるわけではありません。これらは奇妙な場合があるため、フォント ビューアーまたはオンライン サービスで確認する必要がある場合があります。
  4. あなたが彼の最高の仕事を盗んでいるので、老人ミーディンガーはあなたを悩ませています.

Web フォントとして使用する法的ライセンスを持っていないフォントは使用しないことをお勧めします。 :) Googleや他のベンダーは、無料で優れた製品を数多く提供しています。それを使用してください。

font-weightorを省略しても明らかに問題はありませんが、定義内のandfont-styleを確認して一致させる必要があります。font-weightfont-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 に答える