Loading article…
(X) HTML、CSS、および派生システムにおけるフォント ファミリの選択では、優先フォントと一般的なファミリ名のリストを指定します。このリストは、関連するフォント プロパティと組み合わせて、文字のレンダリングに使用される特定のフォント フェイスを決定します。ファミリの選択は、非推奨の (X)HTML要素とその属性、および CSS プロパティの2 つの形式で使用できます。
<font>...</font>facefont-family
CSS 用語のフォント ファミリは、共通のデザイン スタイルによって定義されたフォントのグループであるタイポグラフィ用語の書体と一致します。フォントは特定のグリフ(文字の形状)のセットであり、線の太さ、傾斜、相対的な幅などの追加プロパティによって同じファミリ内の他のフォントと区別されます。CSS 用語のフォント フェイスは「フォント」と一致し、フォント ファミリと追加プロパティの組み合わせによって決定されます。
HTML と CSS の両方で、リストはカンマで区切られます。予期しない結果を回避するには、フォント リストの最後のフォント ファミリは、デフォルトで常に使用できる汎用ファミリの 1 つにする必要があります。フォントが見つからない場合、Web ブラウザーはデフォルトのフォントを使用しますが、これはユーザーが定義したフォントである場合もあります。Web ブラウザーによっては、ユーザーがコード作成者によって定義されたフォントをオーバーライドできる場合もあります。これは個人的な好みによる場合もありますが、ユーザーの物理的な制限 (フォント サイズを大きくしたい、特定の色を避けたいなど) による場合もあります。
ローカル フォントに加えて、最新の Web ブラウザーは、宣言を使用してカスタム フォント ファイルを@font-face直接リンクすることをサポートしています。一度含めると、そのようなフォントは、すべてのローカル フォントとフォールバック フォントとともにプロパティにリストできますfont-family。
例
次の例では、同じフォント フェイス ( Timesまたはデフォルトのセリフ、14 ポイント、斜体) を 3 つの方法で定義しています。
- 別のスタイルシートにCSS を使用します。
- 属性を介して要素にインラインCSS を
style適用します。 - 非推奨のプレゼンテーション要素
<font>...</font>とその非標準属性を使用しますface。(<i>...</i>は一般に非推奨ではありませんが、プレゼンテーションでの使用は非推奨です。)
.text {フォントファミリー: times 、serif ;フォントサイズ: 14 pt ;フォントスタイル: italic ; }
< p クラス= "テキスト" >
別のスタイルシートで CSS を使用してフォーマットされたサンプル テキスト。
</p>
< p style = "フォント ファミリ: times, serif; フォント サイズ: 14pt; フォント スタイル: italic" >
インライン CSS でフォーマットされたサンプル テキスト。
</p>
< p >< i ><フォント フェイス= "times, serif" サイズ= "3" >
非推奨の FONT タグでフォーマットされたサンプル テキスト。
</フォント></ i ></ p >
カンマの後にスペースを入れ、スペースを含む名前を引用符で囲むのが ベストプラクティスです。
フォント名をファミリー名として
CSS はフォント ファミリを書体と同じように定義しようとしますが、エントリfont-familyとその非標準の HTML 前身は、歴史的にフォント フェース全体を識別するためにも使用されてきました。この使用法は、フォント ファイルがファミリの一部として自分自身を記述していないことに起因しており、その一因は、当時 4 つ以上のフォント スタイル (太字/標準および斜体/標準) からの選択をサポートしていたエディターがほとんどなかったことです。
font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'その結果、以前は、衒学的に正しい の代わりになどの宣言がよく見られましたfont-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900。CSS2 も CSS3 もこのような使用法を推奨していません (例には見当たりません) が、ほとんどのブラウザは、それでも有効な「名前」として受け入れます。
汎用フォント
フォントファミリーは特定の名前付きフォント（Heisei Mincho W9など）を使用できますが、結果はユーザーのマシンにインストールされているフォントによって異なります。実際の外観は、ブラウザとシステムにインストールされているフォントによって異なります。[1]たとえば、Microsoft Windows上のFirefoxのデフォルトのインストールでは、セリフ体はTimes New Romanとして、サンセリフ体はArialとして表示されます。
通常、 Webブラウザでユーザーが簡単に設定できるのは 、主にセリフ体、サンセリフ体、等幅書体、筆記体[2]などのごく一部の書体だけです。
多くのシステムでは、不足している「よく知られている」フォントファミリーをメトリック互換の代替フォントに置き換えるために、特殊なフォント置換も実行します。たとえば、Windows ではHelvetica をArial に、Times をTimes New Roman に置き換えます。[3]これらのフォントファミリーは CSS の意味で汎用的ではなく、通常はブラウザレベルで処理されません。
参照
注記
- ^ 「フォント」 W3.org . 2013年9月21日閲覧。
- ^ Konquerorを含むごく少数のウェブブラウザでは筆記体の変更をサポートしていない。
- ^ 「フォント テクノロジ - グローバリゼーション」。docs.microsoft.com。2022年 1 月 31 日。