CSS#7—フォント、文字—

1. font, font-style
1. font
テキストに関連する属性の指定(ショートカット)
値の意味デフォルトfont-stypeフォントの傾き指定normalfont-sightフォントの厚さ指定normalfont-sizeフォントサイズ指定medium(16 px)行の高さ指定normal(行間隔)指定normal(rest.css適用時「1'font-familyフォント(フォント)指定オペレーティングシステム(ブラウザ)」の違い
line-heightでは、行間隔で理解すると誤解があり、行の高さとして理解できます.
💡使用方法
font:斜めの太さ/行の高さフォント;

.box{
font:italic bold 20px / 1.5 "Arial", sans-serif;
}

エラーの例)

.box{
font: 30px / 1.5;	/*Error*/
font: bold; 	/*Error*/
font: bold sans-serif;	/*Error*/
font: 30px / 1.5 sans-serif;
font:bold 30px sans-serif;
font: italic 30px / 1.5 "Arial", sans-serif;
}

「/」の単純な理由は、サイズ、行の高さは単位を含むことができ、ショートカット属性の大きさと行の高さは特定できないため、「/」で区別できる.普通は書き換えですがfontは違います.

fontというショートカット属性を使うには、基本的にfont-sizeとfont-familyを入力する必要があります.

2. font-style
文字スタイル(勾配)の指定(個別)
値の意味デフォルト値正常スタイルnormal斜体字なし
2. font-weight
テキストの太さ(重み)を指定(単一)
値は、デフォルト値「通常」のデフォルト文字の厚さ、400と400の「通常」(400)の太字、700と「同じborder親(親)要素」の太字(boldの太字ではない)、9個の100から900の間の数字(100から100から900まで)、および9個の「通常」と「bold」の太字(フォント)の厚さではないフォント(フォント)を意味します.
💡一般的な厚さの名前font-weightの各値は、通常、以下のフォント名で表される.
値の意味-100 Thin(Hairline)200 Extra Light(UltraLight)300 Ligh 400 Normal 500 Medium 600 Semi Bold(Demi Bold)700 Bold 800 Extra Bold(Ultra Bold)900 Black(Heavy)
数字が小さいほど薄くなり、数字が大きいほど厚くなります
3. font-size
文字サイズの指定(単一)
値は、デフォルト%の親(親)要素のパーセントで、最大の親(親)要素よりも小さいxより小さいxより小さいxより小さいxより小さいサイズを指定します.
4. line-height
行の高さ(行間隔)の指定(個別)
値はデフォルト値を表します.「通常」ブラウザのデフォルト定義(1～1.4)を使用して、「通常」要素のフォントサイズの倍数を指定した単位(px、em、cmなど)に指定した%要素のフォントサイズのパーセントを指定します.
理解するには

正しいline-heightは、上下2行の文章の値から、基本的には1行の16 pxの値で、上下の値を加えると、line-heightの領域になります.

特殊フォントの数倍のline-heightの値を入力する場合は、ピクセル単位も正しいが、倍数は数字で表すことができる.
ex)'line height:2;'入力します.

2回の場合、数字の大きさを調整したい場合に便利に使えます.画素単位で計算すると計算するからです.

5. font-family
フォント(フォント)を指定(単一)
値の意味デフォルトフォント名フォント(フォント)候補リストserifフォントシリーズ名sans-serifmonospace cursivefirctionを指定
💡使用方法
font-ファミリー:[フォント候補1,フォント候補2,...]フォントシリーズ

.box{
font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}

上記の場合、候補1,2,3,4を入力した後、シリーズ(sans-serif)を入力します.
フォントシリーズは入力する必要があります.
💡フォントシリーズ
シリーズ意義-シリーズ背景システム列SANS-シリーズゴシックシリーズ単空間固定幅(幅が等しい)フォントシリーズ草書フォントシリーズファンタジー装飾(面白い文字表現を含む)フォントシリーズ
6.色、色の表示方法
テキストの色を指定
値は、デフォルトの色文字の色rgb(0,0,0)を指定することを意味します.
💡カラー表示
表示色名称ブラウザが提供する色の名称red,blueHEX色コード16進色0000 RGB光三原色rgb(255,255,255,255,255,255,255,255)RGBA光三原色,透明度rgba(255,0,.5)HSL色,飽和度,輝度HSL(120,100%,50%)HSLA色,飽和度,輝度,輝度,輝度,透明度,hsla(120,100%,50%)
上記の表は、色を使用するすべてのプロパティの値として使用できます.
RGBA: Red,Green,Blue,Alpha channel
HSLA: Hue, Saturation, Lightness, Alpha Channel
7. text-align
テキストの位置合わせの指定
値の意味デフォルト値左揃え右揃え中心中央揃え両側揃えが正しいことを証明direction属性(テキスト方向と書き込み方向を指定lrt・rtl)の値により、text-align属性の「デフォルト値」が変更される場合があります.
一般的にはleftをデフォルトとして使用します.
正当な理由は1行では使用できません.2行以上で使用できます.スペースなしで2行以上使用可能
8. text-decoration
テキストの装飾(行)を設定します.
値は、デフォルト値none無線指定none下線上線指定line-through中線(横断)を意味します.
9. text-indent
インデントの指定(最初の行)
負の値を使用できます.
負の値を使用すると、最初の行がインデントされます(左書き).
out-dent値がないため、インデント値を使用してすべてのコンテンツ(すなわち、インデントとインデント)を処理します.
たくさん書く必要はありませんが、活字にはよく使われています.
画面外を押し出すと「text-indent:-99999 px;入力する必要があります.
-100 pxも外に押し出されますが、明確に知らせるためには、上のように書くべきです.
10. letter-spacing, word-spacing
1. letter-spacing
テキストの文字間隔の設定(文字間隔)
値の意味デフォルト値は、通常の単語間の通常間隔の通常単位px、em、cmなどの単位として指定されます.
文字間隔の既定値は0です.
文字の間隔が違うと思ったら、文字の間隔も違います.
負の値も使えます.
2. word-spacing
単語間の間隔(スペース)の設定
値の意味デフォルト値は、通常の単語間の通常間隔の通常単位px、em、cmなどの単位として指定されます.
normalも基本的な書き方の「+0」です.(既定値は"0"なので)
つまり,スペースのある空間にスペースが増えると考えられる.
最後に.
今度はオフセット(位置合わせ)と位置を勉強します.😂