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

皆さんこんにちは、はせです。
今回は、『超強引』に
WebフォントがCanvasに描写されない対処法を書いていきます。
WebフォントがCanvasに描写されない原因は?

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

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



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



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

 

コメント

タイトルとURLをコピーしました