CSSフォント(書体)2024 年の最新の入門チュートリアル。このコースでは 間のセリフとサンセリフのフォントの違い,CSSフォント,フォントファミリー,例,フォントスタイル,例,フォントサイズ,フォントサイズの画素を設定します,例,フォントサイズを設定するためにそれらを使用,例,百分率およびEMの組み合わせを使用します,例,より多くの例,すべてのCSSフォントプロパティ, について学習できます。
CSSのフォントプロパティは、フォント、太字、サイズ、テキストスタイルを定義します。
コンピュータ画面上では、サンセリフフォントはセリフフォントよりも読みやすいと考えられています
CSSでは、フォントファミリ名の2つの種類があります。
一般的な家族 | フォントファミリー | 説明 |
---|---|---|
セリフ | Times New Roman ジョージア | エンドセリフフォントは装飾の行に余分な文字を持っています |
サンセリフ体 | Arialの MS Pゴシック | なし追加の装飾で終わりにこれらのフォント - 「サンセリフ」なしで意味します |
モノスペース | クーリエ新 ルシーダコンソール | すべて等幅の文字が同じ幅を持っています |
テキストフォントファミリのフォントファミリのプロパティ。
font-familyプロパティは、ブラウザが最初のフォントをサポートしていない場合、彼は次のフォントをしようと、「フォールバック」メカニズムとして、いくつかのフォント名を設定する必要があります。
注:フォントファミリの名前が複数の単語である場合、そのようなフォントファミリのような引用符で囲む必要があります」。のTimes New Romanを"
:複数のフォントファミリは、カンマで区切られたことにより、指定されています
より一般的に使用されるフォントの組み合わせによっては、当社のを見てWebセーフフォントの組み合わせ 。
主属性は、フォントスタイル斜体テキストを指定します。
このプロパティには、3つの値があります。
テキストのフォントサイズのプロパティのサイズ。
Webデザインのテキストのサイズを管理することができることは非常に重要です。 ただし、段落が見出しのように見える、またはタイトルは、段落のように見えるようにするためにフォントサイズを調整することはできません。
正しいHTMLタグを使用してください。<H1> - <H6>はタイトルを表し、<P>は段落を表します。
フォントサイズの値は、絶対的または相対的なサイズにすることができます。
実寸:
相対的なサイズ:
あなたは、フォントサイズ、デフォルトのサイズ、および通常のテキストの段落を指定しない場合、それは16ピクセルです(に16px = 1EM)。
画素とテキストサイズを設定すると、あなたのテキストのサイズを完全に制御できます:
上記の例9は、Firefoxの、クローム、オペラ、およびSafariは、Internet Explorerブラウザをスケーリングすることにより、テキストのサイズを調整します。
あなたは、ブラウザのズームツールを使用して文字サイズを調整することができますが、しかし、この調整は、ページ全体だけでなく、テキストです
Internet Explorerがテキストで調整することができない回避するために、多くの開発者ではなく、画素の全角単位を使用します。
全角ユニットは、W3Cで推奨されています。
1EMは、現在のフォントサイズに等しいです。 ブラウザのデフォルトではテキストサイズは16pxにあります。
したがって、1EMのデフォルトサイズは16pxにあります。 PX / 16 = EM:下記式EMピクセルに変換することができます
上記の例では、テキストの全角サイズはピクセル単位で前の例と同じです。 あなたは全角ユニットを使用する場合は、すべてのブラウザで文字サイズを調整することができます。
残念ながら、IEはまだブラウザの問題です。 テキストのサイズを変更し、それは、サイズが通常よりも小さくまたは大きくなります。
すべてのブラウザソリューションでは、デフォルトのフォントサイズの設定<body>要素はパーセンテージであります:
私たちのコードは非常に有効です。 すべてのブラウザで同じテキストサイズを表示し、すべてのブラウザがテキストサイズをズームすることができますすることができます。
太字フォントを設定します。
この例では、フォントを太字に設定する方法を示します。
あなたは、フォントの変更を設定することができます
この例では、フォントの変更を設定する方法を示します。
1宣言内のすべてのフォントのプロパティ
この例では、1つの宣言でフォントプロパティを設定するには、短縮形のプロパティを使用する方法を示します。
Property | 描述 |
---|---|
font | 在一个声明中设置所有的字体属性 |
font-family | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 指定字体的粗细。 |