Q&A
pFontData = loadFont("Anton-Regular.ttf");
とするのはいかがでしょう。
前提・実現したいこと
processingで「デジタル時計」を作っています。
「デジタル時計の数字」をwebフォント（Anton-Regular.ttf）を使用して
全てのデバイス、ブラウザで、同じデザインしたい。
（＊デジタル時計の上下の時間の重なりはエラーではありません）
cssの設定なのか、processingが問題なのか
いろいろとと試しましたが解決しません。
ご教授いただければ幸いです。
何卒よろしくお願いいたします。
発生している問題・エラーメッセージ
指定していないフォント（デフォルトフォントなのか？わからないのですが...）
で「デジタル時計」が動くところまでできています。
【12/1追記】
HTMLのbody内のテキスト「0123456789」にwebフォント（Anton-Regular.ttf）が
反映されているので、CSSには問題がないと思います。
processingで作ったjavascriptができていないと考え、
いろいろとやっていますが苦戦しています。
ご教授いただければ幸いです。
何卒よろしくお願いいたします。
該当のソースコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css" media="screen, print"> @font-face {font-family: "Anton Regular";src: url("data/Anton-Regular.ttf");} body { font-family: "Anton Regular", serif } </style> <script src="processing.js"></script> <script type="text/javascript"> $(function () { sizing(); $(window).resize(function() { sizing(); }); }); function sizing(){ $("#main").attr({height:$("#wrapper").height()}); $("#main").attr({width:$("#wrapper").width()}); } </script> <script type="application/processing" data-processing-target="pjs" > PFont pFontData; class ClockMillis{ ClockMillis() { previous_second = second(); timestamp = millis(); } int get() { if ( second() != previous_second ) { previous_second = second(); timestamp = millis(); } return (millis()-timestamp); } int previous_second; int timestamp; } ClockMillis clock_millis; void setup() { size(innerWidth,innerHeight);//★画面サイズに合わせる textAlign(CENTER); clock_millis = new ClockMillis(); pFontData = loadFont("data/Anton-Regular.ttf");//★文字データ textFont(pFontData);//★文字データ } void draw(){ background(0); textSize(400); text(nf(second(), 2)+nf(clock_millis.get(),3), width/2, height/2); fill(255); text(nf(hour(), 2)+nf(minute(), 2), width/2, height/2+150) ; fill(255); } </script> </head> <body> <div id="wrapper"><canvas id="pjs"><br /></canvas></div> 0123456789 </body> </html>
"Failed to decode downloaded font" というWarningが出ている様子。
kazweda様
有難うございます。
pFontData = loadFont("Anton-Regular.ttf");
を試しましたがダメでした。
また、"Failed to decode downloaded font" というWarningは
意味がわからないので、これから調べてやってみます。
有難うございます。
ChromeのDeveloperツールで確認しました。
FireFoxだと downloadable font: font load failed (font-family: "PjsEmptyFont" のようなエラーが出ています。いずれもローカルのHTMLをブラウザで表示してみました。
それとHTMLの要素に #main が見当たらないようなので必要に応じて追加お願いします。
kazweda様
有難うございます。
pFontData = loadFont("Anton-Regular.ttf");
に変更後、この↓コードから
https://www.openprocessing.org/sketch/153489
この↓コードを１行目に入れてみたところ
/*@pjs font="Anton-Regular.ttf"; */
動きました。
おそらくこれで調整できるとおもいます。
後で、報告させていただきます。
なるほど。確かにフォント指定のコメント行を追加すると反映されますね。
こんな記事も見つかりました。
http://mamemoyasystem.hateblo.jp/entry/2015/10/23/140754
回答3件
0
自己解決
このコードを１行目に入れてみたところ
/*@pjs font="Anton-Regular.ttf"; */
動きました。
有難うございました！
投稿2020/12/11 13:56
総合スコア13
0
かなり霊感を使って回答しますがご容赦ください。
font-faceなどはおそらく関係ないでしょう。
processing について調べたところリファレンスを発見しました。
reference | textFont()
loadFont() でフォントを読み込むのはあっているのですが、多分裏での非同期処理のためファイルが読み込まれている前に textFont()が実行されているような気がします。ドキュメントをよく読むと loadFont() は function preload() の中で実行されているので、同じようにすればフォントファイルが読み込まれてから textFont() が動く、そういう仕組なんじゃないかなと予想してます。
投稿2020/12/11 12:48
総合スコア2853
0
@font-face の文法を確認してください。
@font-face - CSS: カスケーディングスタイルシート | MDN
投稿2020/11/28 09:17
退会済みユーザー
総合スコア0
m6uさま
回答いただきまして、有難うございます。
11/28から3日間、紹介URLの文法を参考にいろいろとやってみても
「デジタル時計」には反映されません。
HTMLに対して@font-faceは反映されているようなので
TTFフォントの読み込みはできていると思うのですが・・・
processingのこの↓箇所が間違っているのでしょうか？
————————————————————
pFontData = loadFont("data/Anton-Regular.ttf");
text(pFontData);
————————————————————
ご教授いただければ幸いです。
何卒よろしくお願いいたします。
あなたの回答
tips
プレビュー
