CSS フォント property_html/css_WEB-ITnose

CSS フォント:

1. フォント ファミリー:

(1) CSS には、次の 2 種類のフォント ファミリー名があります:

<1>ユニバーサル フォント ファミリー - 類似した外観を持つフォント システムの組み合わせ (「」など) Serif " または "Monospace");

<2>特定のフォント ファミリ - 特定のフォント ファミリ (「Times」や「Courier」など);

(2) CSS では 5 つの一般的なフォント ファミリも定義されています:

& lt; 1 & gt; セリフ

フォント (セットフォント) これらのフォントはプロポーショナルで、短い上下があります。フォント内のすべての文字のサイズに応じて幅が異なる場合、文字はプロポーショナルです。セリフ フォントの例には、Times、Georgia、New Century Schoolbook などがあります。中国語の場合、Songti はセリフ フォントであり、中国語の場合、Songti はセリフ フォントであり、英語の場合、一般的に使用されるセリフ フォントは Times New Roman です。 & & Lt; 2 & gt; サンセリフ フォント

これらのフォントはプロポーショナルであり、上下に短いものはありません。サンセリフ フォントの例には、Helvetica、Geneva、Verdana、Arial、Univers などがあります。中国語の場合、Heiti、Youyuan、および Yahei はサンセリフ フォントです。英語では、一般的に使用されるサンセリフ フォントは Arial です。 & & Lt; 3 & gt; 等幅

フォント (固定幅)

等幅フォントはプロポーショナルではありません。これらは、タイプライターで書かれたテキスト、古いドットマトリックス プリンターの出力、さらには古いビデオ ディスプレイ端末をシミュレートするためによく使用されます。これらのフォントでは、ダッシュが上にあるか下にあるかに関係なく、各文字は正確に同じ幅でなければなりません。等幅フォントの例には、Courier、Courier New、Andale Mono などがあります。 & & Lt; 4 & gt; 筆記体

フォント (筆記体)

これらのフォントは人間の手書きを模倣しようとしています。通常、これらは主に Serif フォントにはない曲線とストロークの装飾で構成されます。たとえば、大文字の A の左足の底に小さな曲線がある場合や、全体が渦巻き部分と小さな曲線部分で構成されている場合があります。 Cursive フォントの例には、Zapf Chancery、Author、Comic Sans などがあります。 & & Lt; 5 & gt; ファンタジー フォント

これらのフォントは、いかなる特徴によっても定義することができません。唯一確実なのは、それを他のタイプのフォント シリーズに組み込むことは簡単ではないということです。このようなフォントには、欧文、木版、クリンゴンなどがあります。

1. フォントファミリーの指定: font-family 属性 (1) 機能: 要素のフォントファミリーの値をフォントファミリー名またはクラスファミリー名に使用します。要素の優先順位リスト。ブラウザは認識した最初の値を使用します。

(2) ブラウザのサポート: すべての主要なブラウザは font-family 属性をサポートします。

追記: すべてのフォントファミリールールで共通のフォントファミリーを提供することをお勧めします 2. フォントスタイル: font-style 属性 (1) 機能: フォントのスタイルを定義します。 2) 可能な値:

値

説明

normal

プロパティ	説明
フォント	短縮属性。すべてのフォント固有の属性を 1 つのステートメントで設定します。
font-family	フォントファミリーを設定します。
font-size	フォントサイズを設定します。
font-size-adjust	優先フォントが使用できない場合の置換フォントのスマートなスケーリング。 (CSS2.1 ではこのプロパティが削除されました。)
font-stretch	フォントを水平方向に引き伸ばします。 (CSS2.1 ではこの属性が削除されました。)
font-style	フォント スタイルを設定します。
font-variant	テキストを小さい大文字または通常のフォントで表示します。
font-weight	フォントのウェイトを設定します。

デフォルト値。ブラウザには標準のフォント スタイルが表示されます。 italic

(3) イタリックとオブリークの違い:

イタリック (斜体) は、外観の変化を反映するために各文字の構造に若干の変更を加えたシンプルなフォント スタイルです。対照的に、斜めテキストは、通常の縦書きテキストを斜めにしたバージョンです。

通常、斜体テキストと斜体テキストは Web ブラウザでは全く同じに見えます。

(4) ブラウザのサポート: すべての主要なブラウザは font-style 属性をサポートします。

3. フォント バリアント: font-variant 属性

(1) 機能: スモールキャップを設定します。

(2) 可能な値:

	ブラウザには斜体のフォント スタイルが表示されます。
oblique	ブラウザでは斜体のフォント スタイルが表示されます。
inherit	フォント スタイルを親要素から継承するように指定します。

通常small-capsinherit

説明
デフォルト値。ブラウザには標準フォントが表示されます。
ブラウザには小さい大文字のフォントが表示されます。
font-variant 属性の値を親要素から継承することを指定します。	(3) ブラウザのサポート: すべての主要なブラウザは font-variant 属性をサポートします。

4. フォント太字: font-weight 属性

(1) 機能: テキストの太さを設定します。

(2) 可能な値:

デフォルト値。標準文字を定義します。 太字を定義します。 太字の文字を定義します。 より細かい文字を定義します。 太い文字から細い文字まで定義します。 400 は標準、700 は太字に相当します。 フォントの太さを親要素から継承することを指定します。 5. フォント サイズ: font-size 属性

説明	normal
	太字
	太字
	軽く
	100-900
	inherit
	(3) ブラウザのサポート: すべての主要なブラウザは font-weight 属性をサポートします。

(1) 機能: テキストのサイズを設定します。実際には、フォント内の文字ボックスの高さを設定します。これらのボックスより短い (通常は短い)

(2) 可能な値:

値

小さい font-size を親要素よりも小さいサイズに設定します。 font-size を親要素よりも大きいサイズに設定します。 font-size を固定値に設定します。 親要素に基づいて font-size をパーセンテージ値に設定します。 フォントサイズを親要素から継承することを指定します。

説明	xx-小さい X-小さい
中 大 x-large xx-large フォントサイズを xx-small から xx-large までのさまざまなサイズに設定します。 デフォルト値: 中。	smaller
	larger
	length
	%
	inherit
(3) PX と EM を比較します: & LT; 1 & GT; フォント サイズを設定するためにピクセルを使用します: Firefox、Chrome、Safari ではテキスト サイズを完全に制御でき、再調整できます。上記の例ではテキスト サイズが異なりますが、Internet Explorer では異なります。ブラウザのズーム ツールを使用してテキストのサイズを変更できますが、これは実際にはテキストだけでなくページ全体の調整です。 & & Lt; 2 & gt; EM を使用してフォント サイズを設定します。 Internet Explorer でテキストを調整できない問題を回避するには、ピクセルの代わりに EM 単位を使用します。 1em は現在のフォント サイズと同じです。要素の font-size が 16 ピクセルの場合、1em はその要素の 16 ピクセルに相当します。フォント サイズを設定すると、em 値は親要素のフォント サイズに応じて変化します。 #次の式を使用してピクセルを em に変換できます: (注: 16 は親要素のデフォルトのフォント サイズと同じです。親要素のフォントサイズは20pxです式を次のように変更する必要があります: ピクセル/20=em) (4) em とパーセントの包括的な使用: すべてのブラウザーで同じテキスト サイズを表示でき、すべてのブラウザーでテキストのサイズを拡大縮小することができます。文章。例：textの場合