CSSを使ってフォント属性を変更する方法を学ぶ
フォントとCSS
CSSはあなたのウェブページのフォントを調整する最も効果的な方法です。 フォントファミリ 、サイズ、色、太さ、およびタイポグラフィの他の多くの側面を制御することができます。
CSSのフォントプロパティは、ページをより独特でユニークなものにする最も一般的な方法の1つです。 CSSのフォントプロパティを使用して、テキストの色、サイズ、面（フォント自体）を変更することは簡単です 。
- 色
- フォントファミリー
- フォントサイズ
フォントには3つの部分があります。
- 色
- これはフォントが画面上に表示される色です。
- サイズ
- これは、書体がスクリーン上でレンダリングする方法の大小です。
- 面
- これはフォントファミリであり、実際のフォントと呼ばれることがよくあります。
フォントの色
テキストの色を変更するには、単にCSSのカラースタイルプロパティを使用します。 色名または16進コードを使用できます。 Web上のすべての色と同じように、 ブラウザの安全な色を使用することをお勧めします 。
あなたのウェブページで次のスタイルを試してみてください：
このフォントは赤色に着色されています
このフォントは青色です
フォントサイズ
Web上でフォントサイズを設定するときは、相対サイズで設定するか、ピクセル、センチメートルまたはインチを使用して非常に限定的に設定できます。 しかし、より正確なフォントサイズは、ウェブページを表示するのではなく、印刷に使用するためのもので、Webサイトを閲覧するすべての人が異なる解像度、モニターサイズ、またはデフォルトのフォント設定を持つ場合があります。 したがって、標準サイズとして15pxを選択した場合、あなたのフォントがどれくらい大きくて小さくてもあなたの顧客にレンダリングされているかを知ることは不愉快です。
フォントサイズにemを使用することをお勧めします 。 Emsを使用すると、ページを誰が閲覧してもアクセスできる状態に保つことができ、emは画面のレンダリングを目的としています。 プリントレンダリングのためにピクセルとポイントを残してください。 フォントサイズを変更するには、ウェブページに次のスタイルを挿入します。
このフォントは1emです
このフォントは.75emです。
このフォントは1.25emです
フォントフェイス
あなたのフォントの顔は、「フォント」と考えると多くの人が思い浮かべるものです。好きなフォントを宣言することはできますが、読者にそのフォントがインストールされていなければブラウザは一致するものを見つけようとしますそのため、ページは意図したとおりに表示されません。
この問題に対処するには、ブラウザーが優先順に使用するために、カンマで区切られた顔の名前のリストを指定できます。 これらをフォントスタックといいます。 PC上の標準フォント（Arialなど）は、Macintoshでは標準ではない可能性があります。 したがって、最小限にインストールされたマシンで（そして両方のプラットフォームで）、常にページを表示して、最小限のフォントでもページがデザイン通りに見えるようにする必要があります。
私のお気に入りのフォントスタックの1つは、このセットはサンセリフのフォントコレクションであり、Genevaとarialはひどく似てはいませんが、 MacintoshとWindowsの両方のコンピュータではかなり標準的です。 私は、堅牢なフォントライブラリを持たないUnixやLinuxなどの他のオペレーティングシステム上のお客様に対して、helveticaとhelvを追加しました。
このフォントはsans-serifです
このフォントはセリフです