この記事の目次 開く・閉じる
4文字でも48・64・80pxに分かれた
ドットで描かれた書体でも、すべての文字が同じ幅とは限りません。でんきチップの原本WOFF2を24pxで表示すると、今回のPCブラウザでは「1234」が48 CSS px、「あいうえ」が64 CSS px、「冒険開始」が80 CSS pxでした。
いずれも4文字ですが、漢字の行は数字の行より32 CSS px長くなりました。公式READMEも、基準サイズで数字6px・かな8px・漢字10px、欧文はプロポーショナルと説明しています。今回の24px表示では、数字・かな・漢字の実測がそれぞれ基準幅の2倍に対応しました。
読み込みを待って表示幅を確かめる
- 作例を開き、「フォント読込: true」が出るまで待ちます。
- 下段の3行と、その下の測定値を確認します。測定部分は24pxで固定しています。
- 上のサイズを36へ変更します。見出しは大きくなりますが、下段の測定条件は変わりません。
- ZIP内のexample.htmlを開くと、字体の指定と測定処理を読めます。
await document.fonts.ready;
const element = document.getElementById('digits');
const width = element.getBoundingClientRect().width;作例では、文字を囲むspanに余白・枠線・変形を指定せず、その表示領域を測ります。CSS pxは画面上の配置に使う単位で、ディスプレイの物理的な画素数と同じとは限りません。
フォントを取得する前に測ると、代替書体の値を読む場合があります。読込表示がfalseなら、WOFF2がHTMLと同じフォルダにあるか、ファイル名が一致しているかを確認してください。trueだけで全グリフの存在を保証するわけではありません。
ゲームの表示へどう生かす？
メニューの幅や得点欄を決めるときは、「4文字だから同じ幅」とせず、表示予定の文面で確かめます。今回の結果から別の書体や長い文章の幅まで推定することはできません。字間や太さ、文字の組合せなど、実際に使う条件をそろえて測りましょう。
見た目の好みとレイアウトの収まりは別に確認します。文字を入れる領域に余裕があるか、折り返しが起きないか、スマホの狭い幅で操作名が読めるかを見ます。今回は文字幅の観察であり、読みやすさの優劣や全端末の一致を測った実験ではありません。
出典は作者様の公式READMEです。採用のきっかけになった更新投稿と、素材の紹介・利用条件も確認できます。作例のフォント再配布には同梱のOFLを適用しています。
作例と保存
確認日：2026年11月2日。PCブラウザで操作確認。スマホ実機・読み上げ・全グリフの検証は行っていません。