ほんっとにはじめての HTML5 と CSS3

font-kerningプロパティは、フォントが持っている「カーニング情報」を使って文字間を自動調整します。
kerning はそのままズバリ「カーニング」。

「カーニング」とは 印刷・エディトリアル用語で、字間（アキ）の調整をすること。
フォントのフォルムによって空いて見えるところ（W と A の間とか）を詰めたりすることです。

このプロパティは、IE11, Edge 以外は ほぼ実装。IOS Safari にはベンダープレフィックス（-webkit-）が要るようです（2018年4月記 / 参考：Can I Use）

1. font-kerningプロパティの値
2. font-kerningプロパティの使い方
   1. letter-spacing との併用もできます
3. font-feature-settingsなら日本語もカーニング

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-kerning - CSS | MDN

font-kerningプロパティの値

font-kerningプロパティの値
キーワード	auto　normal　none auto がデフォルト値。カーニングする・しないはブラウザに任せる。 normal は、カーニングする。 none は、カーニングしない。
グローバル値	font-kerning: inherit; 親の値を継承（コレ書かなくても継承するけど） font-kerning: initial; 継承した親の値を解消しデフォルト値に戻す font-kerning: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

font-kerningプロパティの使い方

フォントに含まれるカーニングデータを使うので、カーニングデータが元々無いフォントだと、このプロパティを使っても何も起こりません。
カーニングデータを持つフォント形式は、OpenType（OTF）や WOFF（Web Open Font Format）です。

では、試してみます。（IE11, Edge は未対応です）
Google Fonts の Lato というフォントを使っています。
このプロパティ、日本語（全角）フォントには無関係なようです。

Firefox（Mac）で見たら、こんなかんじ。
none 以外では「P と . 」の間、「W と a」の間などが詰まっています。

ヘディング（<h1>〜<h6>）で使う場合などでは、 autoでブラウザ任せにするんじゃなく、font-kerning: normal と指定したほうがイイかも。ただし IE11, Edge が未実装ですが（2018年4月記）。スマホ用ならすぐにでも使えますね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-auto">
  <span>font-kerning: auto</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal">
  <span>font-kerning: normal</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none">
  <span>font-kerning: none</span>
  P. Wa, WAV, To, Yo</p>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Lato:900');
.mihon p {
	font-family:'Lato', sans-serif;
	margin:20px 0;
	font-size:3rem;
	line-height:1.2
	}
.k-auto {
	-webkit-font-kerning: auto;
	font-kerning: auto}
.k-normal {
	-webkit-font-kerning: normal;
	font-kerning: normal}
.k-none {
	-webkit-font-kerning: none;
	font-kerning: none}
.mihon p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-weight:normal;
	font-size:15px;
	color:#579961;
	display:block;
	margin:0}
</style>

letter-spacing との併用もできます

letter-spacingプロパティも同時に使っている場合、font-kerningの適用後に letter-spacing が行われるそうです。

letter-spacingプロパティは、文字間の間隔を指定するもの。1文字ずつ一定の間隔で開けたり詰めたりできます。このプロパティはフォントモジュールが終わってから記事にする予定です。

試してみます。

letter-spacing は1文字ずつ固定値で調整しますが、font-kerning は臨機応変に詰めてくれます。で、font-kerning だけでは物足りない時に、letter-spacing も併用できるので便利かもね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-normal">
  <span style="letter-spacing:0">font-kerning: normal のみ</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none-spacing">
  <span style="letter-spacing:0">font-kerning: なし、letter-spacing: -0.03em</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal-spacing">
  <span style="letter-spacing:0">font-kerning: <b>normal</b>; letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none">
  <span>どっちもなし</span>
  P. Wa, WAV, To, Yo</p>
</div>
<style>
.k-none-spacing {
	-webkit-font-kerning: none;
	font-kerning: none;
	letter-spacing: -0.03em}
.k-normal-spacing {
	-webkit-font-kerning: normal;
	font-kerning: normal;
	letter-spacing: -0.03em}
</style>

font-feature-settingsなら日本語もカーニング

font-kerningプロパティによるカーニング調整は、日本語フォント（全角）では使えないようです。
日本語のカーニングは font-feature-settingsプロパティで可能で、こちらは IE11, Edge でも実装しています。

＊font-feature-settingsプロパティについては後日詳細な記事にまとめます。

下記のように書きます。

font-feature-settings: "palt";

サンプルビューです。

次回予告

次回から、font-variant に関するプロパティを見ていきましょう。

初回は font-variant-capsプロパティ。
このプロパティは、CSS 2 のときは font-variantプロパティとして、スモールキャップを指定するためのものでした。
CSS 3（Fonts Module Level 3）からは、値がもっと増えて font-variant-capsプロパティと名前も変わりました。

関連記事

• 【30-7】ショートハンドプロパティになった font-variant
• 【30-6】漢字や仮名のための font-variant-east-asian
• 【30-5】文字の代替えを指定する font-variant-alternates
• 【30-4】数字の表示方法を指定する font-variant-numeric
• 【30-3】リガチャ（合字）を指定する font-variant-ligatures
• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう