Webページで実際に表示されたフォントの調べ方。
最初に指定した CSS フォントが読み込まれたと決めつけず、計算済みスタイルを調べてください。表示に影響する太さや代替フォントも記録します。
作業手順をタスクに合わせましょう。
代表的な見出しと本文を選び、利用可能なスタイルからファミリー、サイズ、太さ、行の高さを記録します。指定された代替候補一覧と実際に表示されたフォントの証拠を分けてください。ページ全体の傾向を述べる前に読込状態と画面幅による違いを確認します。
- 用意するもの
- 選択したページで計算された文字スタイル。
- 得られるもの
- 実際に適用されたフォントファミリー、太さ、サイズ。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Supplied style inspection of h1: font-family "Example Sans", Arial, sans-serif; font-size 40px; font-weight 700; line-height 48px. No rendered-font inspection or loading evidence supplied.
完成例
Element: h1 Declared/computed family stack: "Example Sans", Arial, sans-serif Size: 40px Weight: 700 Line height: 48px Actually rendered face: unconfirmed. The family stack alone does not prove Example Sans loaded.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
計算済みの font-family で最初のフォントが表示されたと証明できますか？
できません。指定された候補一覧を表すだけの場合があります。違いが重要なら適切なブラウザー検査で実際の字体を確かめてください。
同じファミリーの二つの要素が違って見えるのはなぜですか？
太さ、可変フォントの設定、サイズ、間隔、特定文字用の代替フォントが異なる場合があります。ファミリーだけでなくそれらの属性も見てください。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑