CSSのfont-feature-settingsの使い方【テキストに文字詰め（カーニング）を設定】

投稿日:2023年01月16日（最終更新日:2023年03月10日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

font-feature-settingsプロパティとは？

font-feature-settingsは、フォントの文字詰め（カーニング）を設定するためのプロパティです。

見出しタイトルなどは文字詰めを行わないと文字と文字の間隔が広がり過ぎて不格好に見えてしまうことがあります。

次の例を見て頂くとわかるように、文字詰めを行うと文字間隔が狭まり引き締まった印象を与えます。また、通常の状態では「『」の左側に不自然な余白ができていますが、文字詰めを行うとその余白も解消することができます。

不自然な余白が生じる原因は、原稿用紙のようにマス目の中に文字が表示されているためです。下記のように句読点も一文字にカウントするためスペースが発生しています。

読みやすさはあるのでページの本文などはこのままでもよいかもしれませんが、テキストを見栄え良くデザインして表示させるためには文字詰めが必要になります。

font-feature-settingsは、文字本来のサイズに応じて文字詰めを行ってくれます。

CSSのfont-kerningも文字詰め（カーニング）ができるプロパティですが、こちらは日本語に対応していないので、日本語テキストで文字詰めを行う場合はfont-feature-settingsを使う必要があります。

似たように文字と文字の間隔を設定するプロパティとして「letter-spacing」というものがあります。

font-feature-settingsがひとつひとつの文字のサイズに合わせた適切な文字詰めを設定するのに対し、letter-spacingはテキストの一文字一文字すべてに均一な間隔を設定する機能を持ちます。

2つを合わせて使うことで、思い通りの形にテキストを表示することができるようになります。

letter-spacingプロパティについて詳しくはこちらのページをご覧ください。

letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてテキストのバランスを整えることができます...【もっと読む】

font-feature-settingsで文字詰めを行うためには、あらかじめ対象のテキストがOpenTypeのフォントになっている必要があります。すべてのフォントで文字詰めが行えるわけではないので注意が必要です。

OpenTypeフォントとは、Appleが開発したTrueTypeというフォント規格をMicrosoftとAdobeが拡張させたものです。

前述のように一文字づつマス目に収めるような形式になっていますが、「プロポーショナルメトリクス」という文字間隔情報を備えています。font-feature-settingsは、このプロポーショナルメトリクスを有効にすることで文字詰めを行っています。

OpenTypeフォントには、「游ゴシック」や「游明朝」などがあります。

これに対して「MS P ゴシック」「MS P 明朝」などはTrueTypeフォントに該当するためfont-feature-settingsを使っても文字詰めはできません。

font-feature-settingsは次のように、OpenTypeフォントが持つどの機能を有効にするかを値で指定して使用します。

文字詰めの種類に添えて記述してある「1」は、文字詰めを有効にするという役割を持っています。「1」を書けば有効、「0」を書くと無効になります。「on」「off」でもOKです。省略した場合は自動的に有効になります。

HTML

<p class="sample">漢字「ひらがな、カタカナ。」</p>
<p class="sample sample1">漢字「ひらがな、カタカナ。」</p>

CSS

.sample{
    font-family:'游明朝','Yu Mincho';
}
.sample1{
    font-feature-settings:"palt" 1;/*文字詰め*/
}

プレビュー

漢字「ひらがな、カタカナ。１２３&ABCabcabc」

日本語に適用できるfont-feature-settingsの値はつぎの通りです。