『みんなのCSSの本』第3章：フォントとText_html/css_WEB-ITnose-htmlチュートリアル-php.cn

『みんなのCSSの本』第3章：フォントとText_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:54:07

オリジナル

1066 人が閲覧しました

1. フォントとテキスト

フォントとテキストの違い:

フォントには主にテキストのサイズと外観が含まれます (単一の文字に適用できます)。

テキストには主にフォントの処理が含まれます (テキストブロックにのみ適用できます)

2. フォントを指定します

CSS でフォントを指定する最も簡単な方法は、5 つの一般的なフォントコレクションを使用することです

serif: これフォントには、文字ストロークの端にセリフと呼ばれる小さな詳細があります (Time New Roman、Georgia、Palatino)

サンセリフ: 端に詳細はありません (Trebuchet MS、Arial、Verdana)

等幅: 各文字同じ幅 (たとえば、i と m は同じ幅) で、コードブロックを植字したり印刷効果を模倣するためによく使用されます

筆記体: 手書きのメモですが、手書きよりもすっきりしています (Comic Sans MS、ブラシスクリプト)

fantasy: 他の種類に分類できないフォント

/*指定通用字体，浏览器会选择默认的Helvetica或者Arial*//*font-family是一个可继承的属性，值会传递给所有的后代*/body {font-family: sans-serif;} /*以首先字母为开头，以通用字体结束 */body{font-family: "hoefler text",times,serif;}

ログイン後にコピー

3. フォントサイズを設定する

フォントサイズを設定するには、次の 3 種類の値を使用できます:

絶対値: ピクセル、インチ

相対値: パーセンテージ、em

スウェットシャツのサイズのキーワード: x-small、small、large、xx-large

相対サイズのフォントを使用する利点:

テキストサイズで大きいまたは小さいを選択した後、すべてのフォント比例的に拡大縮小します

body タグのフォントサイズを変更するだけで、テキストのサイズも比例的に変更します

相対的なサイズのフォントを使用するデメリット

フォントサイズの継承により非常に小さなフォントが表示される可能性があります

テキストのスケーリングを考慮しない CSS ページレイアウトはユーザーにとって簡単に「壊す」ことができます

body{    font-family: verdana,arial,sans-serif;    /*为字体设置了可以调准的基准大小,1em一般为16像素高*/    font-size: 1em;} h3{    /*h3的默认大小为1.2em(19.2px)，重新设置为0.8em*/    font-size: 0.8em;} /*分别为ol和ul设置大小，而不是为li设置大小，方便后续自定义*/ol{font-size: .75em;}ul{font-size: .75em;} a {font-size: .7em;}/*规定ul的子元素a从父元素中继承属性值（如果没有使用inherit，a的值就会变成0.75*0.7em，导致过小*/ul a {font-size: inherit;}

ログイン後にコピー

4. フォント属性

100、200、...、900、明るい、標準、太字

font-style	テキストが直立かどうかを定義します。斜め、斜体、標準、斜め

文字

小文字、 Normal

/*font-style有两个作用：使字体倾斜，或者使倾斜的字体直立*/p {font-style: italic;}span {font-style: normal;} /*加粗超链接的内容*/a{font-weight: bold;} /*将h3标题转换为小型大写字母*/h3{font-variant: small-caps;}

ログイン後にコピー

5. フォント属性の略称

p {    /*始终要保证声明font-size 和 font-family的值*/    /*指定顺序：先指定font-weight、font-style、font-variant（任意顺序），然后依次指定font-size、font-family*/    font:bold italic small-caps .75em verdana, arial, sans-serif;}

ログイン後にコピー

6. CSS スネークテキスト

CSS はボックスを配置します要素内テキストの周囲は、その部分のみ閉じられます。 begin と end

text-indent は最初の行のみインデントできます

段落全体をインデントするには、margin-left を使用してコンテナ全体を右に移動する必要があります

text-indent要素内のテキストの最初の行をインデントしますvertical-alignベースラインを基準にしてテキストを上下に移動しますletter-spacing 文字間隔の設定任意の数値 (単位を指定する必要はありません)

7。属性
任意の長さの値
任意の長さの値、sup、sub、top、middle、bottom
任意の長さの値	単語間隔	単語の間隔を設定
任意の長さの値	text-decoration	テキストに変更を追加
none、下線オーバーライン、ラインスルー、ブリンク	text-align	含まれる要素に合わせてテキストを整列させる
left、right、center、justify	line-height	行の高さを設定する（行間の距離）および行ベースライン)
	text-transform	要素内のテキストの大文字と小文字を変更します