[TIL] CSS 3: Typography

Typography

1. Font

Font-ホームフォント設定
フォントの名前が2つ以上の単語であれば、引用符で囲みます.

font-ウェイト球の設定
bold、normal or 100-900(100の倍数){font-weight: bold;}{font-weight: 200;}

font-スタイル斜体設定{font-style: italic;}

Serifの末尾にはEdgeの文字スタイルがあります.新聞のデザイン
ex) Times New Roman, Georgia

Sans-Serif:テールにシルエットのないシンプルなスタイル.きれい
ex) Arial or Helvetica.
Google Fontから「Space Mono+400+Bold」1をインポートする方法

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

{font-family: "Space Mono", monospace;}`

Google Fontから「Space Mono+400+Bold」2[@font-face]をインポートする方法

相対ファイルパスを使用してフォントをインポートする方法
"../fonts/Glegoo-Regular.ttf", "format: trutype"

@font-face{
font-family:"Glegoo";
src: url(../fonts.Glegoo-Regular.ttf) format ('turetype');} 
.banner {
font-family: Glegoo;
font-size: 20px;}

2. Space

単語間隔{word-spacing: 1.5em;}

Letter Spacingピッチ{letter-spacing: 0.02em;}

行高さ行高さ{line-height: 1.4;}

空白、インデント、改行

3. Text

テキスト-変換大文字と小文字の変更{text-transform: upprcase}

テキスト-左/中/右揃え

text-装飾:aタグから出力された参照線を削除します.

word-wrap/word-break親領域以外のテキストを処理します.

4.単位

絶対属性のサイズpx,pt

相対プロパティのサイズ.em
10 pxが親要素に適用される場合、サブ要素の2 emは20 pxの2倍を意味する.
親要素のフォントサイズが指定されていない場合は、デフォルト値は16 px、2 emは32 pxです.