Delphi Programming / Object Pascal
サイトのトップページへ リンクのページへ ロゴマーク
[掲載 2024年09月11日] [更新 2024年09月18日] Delphi 一般・その他 [未分類 - OS の操作等]
ウェブページで使用しているフォント名を調べる
動作確認等 Windows 10 ビルド 19045 Pro 64 bit
Google Chrome 127, Microsoft Edge 128, Firefox 129
[整理番号 - 1794]







ウェブページで使用しているフォント名を調べる


ウェブページ本文のテキスト描画に使用しているフォント名を調べる方法を以下の記事に掲載しています.これは,その機能をブックマークとして登録して利用する方法です.ブックマークへの登録は利用者が行います.このような機能をブックマークレットと言います.



下図はそのブックマークを使用した結果です.マウスの左ボタンを押した領域で,一般的な文字の表示に使用されているフォント名をツールチップスで表示します.欧文フォントなど,日本語が使用できないフォントを検出した場合は,一般的な日本語の表示に使用する日本語用のフォント名 (和文フォント名) も表示します.

ウェブページの文字 (テキスト) の表示に使用するフォントは,ウェブページの作成者が設定しています.ウェブページの作成者が設定していない場合は,ウェブブラウザのデフォルトのフォント設定が使用されます.

[F5] キーなどの操作でページの再読み込みをしたり,別のページを表示すると,このブックマークレットの機能は無効になります.



図1
検出結果の例

図2
欧文フォントなどを検出した場合
  • ( ) 内は日本語の表示用
  • monospace は等幅フォントの総称

下図では Noto sans JP となっています.このフォントは筆者の環境にはインストールされていません.このフォントはウェブフォント (Web フォント) です.ウェブフォントは,ウェブページ自身のサーバ,うるいは他のサーバにあるフォントファイルを読み込んで利用するフォントです.
ウェブフォントは読み込みに時間がかかることがあります.そのため,誤認識して和文のフォント名も表示することがあります.このフォントは,末尾が JP となっていますから日本語用のフォントです.その場合は,もう 1 度文字をクリックしてください.




図3
ウェブフォントの例
  • ( ) 内は日本語の表示に使用されるフォント名
  • 筆者の環境にはインストールされていないフォント

別のウェブページの例です.マウスの左ボタンを押した領域のテキストは,筆者の環境では Meiryo フォントを使用して描画されていすることになります.
Emoji : は,もし,Unicode Emoji の絵文字があった場合,それらの Emoji は,このフォントを使用して描画されることを意味しています.




図4
テキストの描画に使用しているフォント名
  • 筆者の環境では Meiryo

下図は,同じ場所で [Ctrl] キーを押した状態でマウスの左ボタンを押した結果です.これは,ウェブページの作成者が設定しているフォント名のリストです.Meiryo よりも上の 4 つのフォント名のフォントは筆者の環境では使用できないフォントです.その結果,上野図のように,使用されているフォントとして Meiryo が検出されます.
Meiryo は,Windows 10 に標準でインストールされています.




図5
フォント名の設定リスト
  • 先頭のフォント名は -apple-system
  • 筆者の環境では Meiryo が使用される

[備考]
本ブックマークレットは,特殊な記号類専用のフォントや特定の文字種だけを収録しているフォントなどは検出できません.