カーニング(文字詰め)する3つのCSSプロパティのサンプル

letter-spacing

1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ

1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ

font-kerning

1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ

1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ

font-variant-numeric

font-family: cursive; を指定

1.23
3.46
7.89

1.23
3.46
7.89

<h2>letter-spacing</h2>
<p>1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ</p>
<p class="c1">1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ</p>

<h2>font-kerning</h2>
<p class="c2x">1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ</p>
<p class="c2">1234567890 Webサイトでテキストをカーニング(文字詰め)する3つのCSSプロパティ</p>

<h2>font-variant-numeric</h2>
<p>font-family: cursive; を指定</p>
<p class="c3x">1.23<br>3.46<br>7.89</p>
<p class="c3">1.23<br>3.46<br>7.89</p>

.c1 {
  letter-spacing: -1px;
}
.c2x {
  -webkit-font-kerning: none;
  font-kerning: none;
}
.c2 {
  -webkit-font-kerning: normal;
  font-kerning: normal;
}
.c3x,
.c3 {
  font-family: cursive;
}
.c3 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

元記事を表示する