CSSのフォントプロパティは、フォントファミリ、太さ、サイズ、およびテキストのスタイルを定義します。
セリフとサンセリフのフォントの違い
CSSのフォントファミリー
CSSでは、フォントファミリ名の2つの種類があります。
- 一般的な家族 - （「セリフ」または「モノスペース」のように）似た表情でフォントファミリのグループ
- フォントファミリ -特定のフォントファミリ（「のTimes New Roman "や" Arialの"のような）
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | 注意：コンピュータの画面上には、サンセリフフォントはセリフフォントよりも読みやすいと考えられています。 |
|---|
フォントファミリー
テキストのフォントファミリーがで設定されているfont-familyプロパティ。
font-familyプロパティは、「フォールバック」システムなど、いくつかのフォント名を保持する必要があります。 ブラウザが最初のフォントをサポートしていない場合、それはその次のフォントをしよう、と。
あなたがしたいフォントで起動し、他のフォントが使用できない場合、ブラウザは、一般的な家族の中で類似のフォントを選択できるように、一般的な家族で終わります。
注 ：「のTimes New Roman」：フォントファミリの名前が複数の単語であれば、それは次のように、引用符で囲む必要があります。
複数のフォントファミリは、コンマで区切って指定されています。
一般的に使用されるフォントの組み合わせについては、私たちの見たWebセーフフォントの組み合わせ 。
フォントスタイル
font-styleプロパティは、主に斜体を指定するために使用されます。
このプロパティには、3つの値があります。
- ノーマル - テキストが正常に表示されます
- 斜体 - テキストがイタリック体で示されています
- 斜め - テキストは「傾い」されている（斜めはイタリックに非常に類似しているが、あまりサポートされています）
例
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} »それを自分で試してみてください フォントサイズ
font-sizeプロパティは、テキストのサイズを設定します。
テキストのサイズを管理できることはウェブデザインにおいて重要です。 ただし、段落が見出しのように見える、または見出しが段落のように見えるようにフォントサイズ調整を使用しないでください。
<H6>の見出しおよび<P>段落のために - <H1>のように、適切なHTMLタグを常に使用します。
フォントサイズの値は、絶対、または相対的なサイズにすることができます。
実寸：
- 指定したサイズにテキストを設定します。
- ユーザーが（アクセシビリティの理由で悪い）すべてのブラウザで文字サイズを変更することはできません。
- 出力の物理的なサイズがわかっている場合、絶対サイズは便利です
相対的なサイズ：
- 周囲の要素にサイズが相対的に設定します。
- ユーザーがブラウザで文字サイズを変更できるようにします
| 注：フォントサイズを指定しない場合は、通常のテキストのデフォルトサイズは、段落のように、に16px（16pxに= 1EM）です。 |
|---|
ピクセルに設定するフォントサイズ
ピクセルでテキストサイズを設定すると、あなたのテキストのサイズを完全に制御できます：
ヒント：ピクセルを使用する場合でも、ページ全体のサイズを変更するには、ズームツールを使用することができます。
エムとセットフォント・サイズ
ユーザーが（ブラウザメニューの）テキストのサイズを変更できるようにするには、多くの開発者がピクセルの代わりにそれらを使用しています。
全角サイズ単位は、W3Cで推奨されています。
1EMは、現在のフォントサイズに等しいです。 ブラウザのデフォルトのテキストサイズは16pxにあります。 だから、1EMのデフォルトサイズは16pxにあります。
ピクセル/ 16 = EM：サイズは、次の式を使用してEMピクセルから計算することができます。
例
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} »それを自分で試してみてください 上記の例では、全角のテキストサイズはピクセル単位で前の例と同じです。 しかし、EMサイズで、すべてのブラウザのテキストサイズを調整することができます。
残念ながら、まだIEの古いバージョンに問題があります。 テキストは、大きくすべきである場合よりも大きく、それは小さくすべきである場合よりも小さくなります。
パーセントとエムの組み合わせを使用
すべてのブラウザで動作するソリューションは、<body>要素のためのパーセントでデフォルトのフォントサイズを設定することです。
例
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} »それを自分で試してみてください 私たちのコードは素晴らしい作品！ これは、すべてのブラウザで同じテキストサイズを示しており、すべてのブラウザがズームインまたはテキストのサイズを変更することができます！
フォントの重さ
font-weightプロパティは、フォントの重みを指定します。
フォントのバリアント
font-variantプロパティは、テキストがスモールキャップのフォントで表示するかどうかを指定します。
スモールキャップフォントでは、小文字はすべて大文字に変換されます。 しかし、変換後の大文字は、テキストの元の大文字よりも小さいフォントサイズで表示されます。
その他の例
1宣言内のすべてのフォントのプロパティ
この例では、1つの宣言でフォントプロパティのすべてを設定するための簡略記述特性を使用する方法を示します。
練習で自分自身をテスト！
すべてのCSSフォントのプロパティ
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |