Font & Text

7386 ワード

フロントエンド CSS テキストリンク

①font-size属性

font-size: 40px;

font-size: 2.0em;

font-size: 150%;

font-size: large;

ほとんどのフロントエンド開発ではfont−sizeはpx単位を用いるが,最近の傾向はem,%単位を用いることであり,これは反応型や移動の原因である可能性がある.

②font-family属性

指定したフォントのプロパティは、コンピュータにフォントがインストールされていない場合には適用されません.
ex) font-family: Georgia, "Times New Roman", serif;複数のフォントを同時に指定できます.最初に指定したフォントがコンピュータにインストールされていない場合は、2番目に指定したフォントを適用します.
ex) font-family: Georgia, "Malgun Gothic", serif;複数のフォントを設定する場合は、以下のフォントのみを使用します.
ハングルがないフォントを前面に、ハングルフォントを背面に配置すると、英語とハングルは異なるフォントで表示されます.

③font-style&font-weightプロパティ

font-style:斜体の指定

font-style: normal;:デフォルトフォント形状を表示(デフォルト)

font-style: italic;:斜体表示

font-style: oblique;:元のフォントの傾き
(2、3番のフォーマットはほぼ同じ)

font-weight:フォントの太さを指定

font-weight: normal;:元のフォントの太さ(デフォルト)、数字400

に等しい

font-style: bold;:濃い色表示、数字700と同じ

font-style: (100 ~ 900);:数字100で太さを調整可能

font-style: bolder;:親要素が継承した太さよりも太く表示

font-style: lighter;:親要素が継承した太さよりも薄く表示されます

④line-height属性

テキストの高さの指定

<head>
  <style>
    .small {
      line-height: 70%; /* 16px * 70% */
    }
    .big {
      line-height: 1.2; /* 16px * 1.2 */
    } /* line-height는 상속이 되므로 이를 고려하여 단위를 빼고 적는 것이 일반적인 것 같다 */
    .lh-3x {
      line-height: 3.0; /* 16px * 3 */
    }

  </style>
</head>

heightとline-heightの属性値が同じで、垂直中央揃え

⑤ font shorthand syntax

font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

+)font-variant:小文字で置換された属性

⑥文字間隔属性

文字間隔の指定

<head>
  <style>
    .loose {
      letter-spacing: 2px;
    }
    .tight {
      letter-spacing: -1px;
    }
  </style>
</head>

ㅇtext-alignプロパティ

text-align: left;:左揃え

text-align: right;:右揃え

text-align: center;:中央揃え

text-align: justify;:左右の列に合わせるように画面を長くします

ただしtext-alignプロパティが適用されない要素もあります.例えば、a要素、img要素などのinline要素.inline要素ではwidthという概念自体がないため,中心概念も存在しない.inline要素にtext-alignプロパティを適用する場合は、display: block;を指定するか、親要素にblcok要素を作成します.

◇テキスト-装飾属性

テキストを線で装飾できるプロパティです.

text-decoration: none;:直線を作成しない

text-decoration: line-through;:文字の間に直線を作成

text-decoration: overline;:テキストに直線を作成

text-decoration: underline;:アルファベットの下に直線を作成

複数のプロパティ値を使用して複数の線を作成できます.
ex)text-decoration: overline underline;→文字の上下に直線を作成

⑨白空間属性

連続空間とタブの処理方法.1つのスペースにマージし、入力出力

に保持します.

改行の処理方法.1つのスペースにマージし、入力出力

に保持します.

コンテンツが領域サイズを超えた場合の処理方法.O領域内に内容を表示するために自動的に改行する;X領域外で入出力

を押す

ütext-オーバーフロー属性

非自動改行(改行)テキストの親領域外での処理方法の定義
この属性を使用するために必要な条件↓
1.widthプロパティを指定する必要があります.必要に応じてブロックレベルの要素に変更する必要があります.
2.自動改行を防止するには、white-spaceプロパティ値をnowrapに設定します.
3.オーバーフロー属性に「visible」以外の値を指定する必要があります

text-overflow: clip;:領域外のテキストを表示しない(デフォルト)

text-overflow: ellipsis;:テキスト領域以外のサムネイルは表示されません(…)表示