Webフォント、Canvasに描写できない。超絶強引だけど描写する方法。

       
  •  

  • カテゴリー: HTML5
 この記事は約1分で読めます。
皆さんこんにちは、はせです。
今回は、『超強引』に
WebフォントがCanvasに描写されない対処法を書いていきます。
WebフォントがCanvasに描写されない原因は?

ローカル環境でWebフォントを利用するならば
形式は 『ttf』でよいのですが、
サーバーにあげるときは
『woff』に変換する必要があります。

woffはttfを圧縮したもので
ttfに比べ読み取る際に時間をかけないので
描写することが可能です。
上記を試してもできない場合がありますよね。
コードミスなどをしていないのにWebフォントが反映されないときは
Webフォントを読み込む前に
Canvasへの描写が始まってしまっていることが原因です。
CanvasにWebフォントが読み込まれないとき対策は?



 
フォントが初めて使われたときに
フォントの読み込みを開始します。
なのでCanvasに描写する処理の前に
フォントを使えばいいのでは?と考え、
描写の処理が行われる前にフォントを使用すればいけます!
個人的に使う場合なら
ページのどこかに
そのフォントを使った文字を使いましょう!笑
透明にしたりするのもありです。
本当に強引ですよね笑



なのであまり参考にしない方が良いです笑
実用的なのは
qiita.com/damele0n/items/6afc5160cf7ea8b15787
こちらのサイトに記載されていたので紹介します!

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

HTML5
CSSやJavaScriptが反映されない時の対処法。キャッシュが原因かも。

皆さんこんにちは、はせです。HTMLやPHPその他諸々でCSSやJavaScriptが反映されないと …

HTML5
スマホサイズで文字など全体的に小さい対処法、html~備忘録~

スマホサイズで文字など全体的に小さい対処法<meta name=“viewport …