以前は、Web ページのフォントを変更するには、関連するテキストを <tag> タグにネストし、属性を使用してその色、サイズ、スタイルを制御することが一般的でした。現在、このアプローチは視覚的なスタイルと実際のコンテンツのマークアップが混在しているため、認識されなくなりました。現在、フォント スタイル情報を Cascading Style Sheet (CSS) と呼ばれる別のファイルに集約する方法をお勧めします。
フォント情報を 1 つの CSS ファイルに集中させることには、操作が簡単で、特別なソフトウェアを必要とせず、ほとんどの主要なブラウザで均一に動作するなど、明らかな利点が数多くあります。さらに、情報が 1 か所に集中しているため、Web ページの外観を簡単に変更できます。メイン スタイル シートのフォントや色を変更するだけで、その変更は Web ページ全体に即座に「カスケード」されます。サイト。
楽しそうですよね？この記事では、HTML ページのフォント、色、テキスト サイズ、間隔を一元的に制御する必要がある場合に、古い <font> 要素を置き換えるように設計された CSS フォント プロパティについて説明しますので、読み続けてください。活用できる強力なツール。
制御タイプ
font 属性は、対応する要素で使用されるフォントを定義します。通常、このプロパティにはカンマで区切られたフォント名のリストが含まれます。空白を含む名前は引用符で囲むことができます。適用すると、ブラウザーはリスト内で最初に見つかったフォントを使用するか、有効なフォントが見つからない場合はデフォルトの標準ブラウザー フォントを使用します。
リスト A は、この命令の応用例です。
リストA
<html> <頭> <style type="text/css"> 。引用 { フォントファミリー: "Bookman Old Style"、"Verdana"; } </スタイル> </head> <本文> <div class="quote">そうなるか、ならないか、それが問題です。</div> </body> </html> |
図 A は出力を示しています。
図A
フォントファミリー
このディレクティブは、上記の例でクライアント システムによって表示されるフォントに大きく依存することに注意してください。システムが Bookman Old Style フォントと Verdana フォントを表示しない場合は、デフォルトのブラウザ フォントが使用されます。この問題を回避するには、特別なフォント名のリストの後に、セリフ、サンセリフ、筆記体などの一般的なフォント名のリストを追加して、そのフォント クラス内で最も一致するフォントを使用するようにブラウザに指示するのが最善です。 。リスト B は、上記の問題を正確に解決する上記の例の改訂版です。
リストB
<html> <頭> <style type="text/css"> 。引用 { font-family: "Bookman Old Style"、"Verdana"、"cursive"; } </スタイル> </head> <本文> <div class="quote">そうなるか、ならないか、それが問題です。</div> </body> </html> |