CSS
タイポグラフィ

構文

• font -style [ font-style ] [font-variant] [font-weight] フォントサイズ [/ line-height] font-family ;
• font-style： font-style
• font-variant： font-variant
• font-weight： font-weight ;
• font-size： font-size ;
• line-height： 行の高さ 。
• font-family： font-family ;
• カラー： カラー ;
• 引用符： なし|文字列|初期|継承 ;
• font-stretch： font-stretch ;
• text-align： text-align ;
• テキストインデント： 長さ|初期|継承 ;
• テキストオーバーフロー： クリップ|省略記号|文字列|初期|継承 ;
• テキスト変換： なし|大文字|大文字|小文字|初期|継承 ;
• text-shadow： h-shadow v-shadow blur-radiusカラー| none | initial |継承 ;
• font-size-adjust： number | none | initial |継承;
• フォントストレッチ： 超凝縮|凝縮|凝縮|半凝縮|通常|半膨張|膨張|超膨張|超膨張|初期|継承;
• ハイフン： なし|マニュアル|自動 ;
• tab-size： number | length | initial |継承します。
• 文字間隔： normal | length | initial |継承 ;
• 単語間隔： normal | length | initial |継承 ;

パラメーター

備考

フォントサイズ

HTML：

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS：

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

#element-oneのテキストのサイズは30pxですが、 #element-twoテキストのサイズは10pxになります。

フォントショートカット

構文は次のとおりです。

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

すべてのフォント関連スタイルを1つの宣言でfont短縮形にすることができます。単にfontプロパティを使用して、正しい順序で値を配置してください。

たとえば、すべてのp要素を20 pxのフォントサイズで太字にし、Arialをフォントファミリとして使用する場合は、通常、次のようにコード化します。

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

しかし、フォントの短縮形では、以下のように要約できます：

p {
    font: bold 20px Arial, sans-serif;
}

注 ： font-style 、 font-variant 、 font-weightおよびline-heightはオプションであるため、この例では3つを省略しています。ショートカットを使用すると、与えられていない他の属性がリセットされることに注意することが重要です。別の重要な点は、フォントショートカットが動作するために必要な2つの属性がfont-sizeとfont-familyです。両方が含まれていない場合、ショートカットは無視されます。

各プロパティの初期値：

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - ユーザエージェントに依存する

フォントスタック

font-family: 'Segoe UI', Tahoma, sans-serif;

ブラウザは、上記のプロパティの対象となる要素内の文字にフォント "Segoe UI"を適用しようとします。このフォントが利用できない場合、またはフォントに必要な文字のグリフが含まれていない場合、ブラウザはTahomaに戻り、必要に応じてユーザーのコンピュータ上のサンセリフのフォントに戻ります。 "Segoe UI"のような複数の単語を持つフォント名は、一重引用符または二重引用符を使用する必要があることに注意してください。

font-family: Consolas, 'Courier New', monospace;

ブラウザは、上記のプロパティの対象となる要素内の文字にフォントフェイス "Consolas"を適用しようとします。このフォントが利用できない場合、またはフォントに必要な文字のグリフが含まれていない場合、ブラウザは「Courier New」に戻り、必要に応じてユーザーのコンピュータ上のモノスペースフォントに戻ります。

文字間隔

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

letter-spacingプロパティは、テキスト内の文字間のスペースを指定するために使用されます。

！文字間隔は負の値もサポートします：

p {
  letter-spacing: -1px;
}

リソース： https : //developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

テキスト変換

text-transformプロパティを使用すると、テキストの大文字を変更できます。有効な値は、 uppercase 、 capitalize 、 lowercase 、 initial 、 inherit 、およびnone

CSS：

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

テキストインデント

p {
    text-indent: 50px;
}

text-indentプロパティは、要素のテキストコンテンツの最初の行の先頭に移動する水平方向のスペースの量を指定します。

リソース：

• 段落内のテキストの最初の行だけインデントしますか？
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

テキスト装飾

text-decorationプロパティは、テキストから装飾を設定または削除するために使用されます。

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration-styleおよびtext-decoration-colorと組み合わせて、略式プロパティとしてtext-decorationを使用することができます。

.title { text-decoration: underline dotted blue; }

これは、

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

以下のプロパティはFirefoxでのみサポートされていることに注意してください

• テキスト装飾色
• テキスト装飾線
• テキスト装飾スタイル
• テキスト装飾 - スキップ

テキストオーバーフロー

text-overflowプロパティは、オーバーフローしたコンテンツをユーザーに通知する方法を扱います。この例では、 ellipsisはクリップされたテキストを表します。

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

残念ながら、 text-overflow: ellipsisは、1行のテキストでしか機能しません。標準CSSの最後の行に省略符号を付ける方法はありませんが、フレックスボックスのWebkitのみの非標準的な実装で実現できます。

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

例（ChromeまたはSafariで開く）：

http://jsfiddle.net/csYjC/1131/

リソース：

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

ワード間隔

word-spacingプロパティは、タグと単語の間のスペーシングの動作を指定します。

可能な値

• 正または負の長さ （ em px vh cmなどを使用）またはパーセンテージ （ %を使用）
• キーワードnormalは、フォントのデフォルトの単語間隔を使用します
• キーワードinheritは親要素から値inherit受け取ります

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

オンラインデモ

自分で試してみてください

参考文献：

• 単語間隔 - MDN
• ワードスペース - w3.org

テキストの方向

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

directionプロパティは、要素の水平方向のテキスト方向を変更するために使用されます。

構文： direction: ltr | rtl | initial | inherit;

writing-modeプロパティは、テキストの配置を変更し、言語に応じて上から下、または左から右に読むことができます。

構文： direction: horizontal-tb | vertical-rl | vertical-lr;

フォントバリアント

属性：

正常

フォントのデフォルト属性。

小さな帽子

大文字にすべての文字を設定しますが 、本来は大文字よりもサイズが小さい（元のテキストから）小文字になります。

CSS：

.smallcaps{
   font-variant: small-caps;
}

HTML：

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

OUTPUT：

注：font-variantプロパティは、font-variant-caps、font-variant-numeric、font-variant-alternates、font-variant-ligatures、およびfont-variant-east-asianの略語です。

引用

quotesプロパティは、 <q>タグの開始および終了の引用符をカスタマイズするために使用されます。

q {
    quotes: "«" "»";
}

テキストシャドー

テキストに影を追加するには、 text-shadowプロパティを使用しtext-shadow 。構文は次のとおりです。

text-shadow: horizontal-offset vertical-offset blur color;

ぼかし半径のない影

h1 {
  text-shadow: 2px 2px #0000FF;
}

これにより、見出しの周りに青い影の効果が作成されます

ぼかし半径のシャドウ

ぼかし効果を追加するには、オプションのblur radius引数を追加します

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

複数の影

要素に複数の影を付けるには、それらをカンマで区切ります

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}