HTMLでWebサイトを作ったはいいけど、日本語の文字の間が開きすぎて不格好だ…と頭を抱えた方もいるのではないでしょうか？
そんな方にお勧めしたいのが、CSSのfont-feature-settingsプロパティ！実はとても簡単に文字詰めができるプロパティなのです。
今回は、font-feature-settingsの
・応用的なfont-feature-settingsの使い方
・文字詰めによる見栄えの変化
について説明します。
目次
font-feature-settingsプロパティとは
font-feature-settingsプロパティの読み方
font-feature-settingsプロパティは「フォントフィーチャーセッティングス」と読みます。
font-feature-settingsプロパティの説明
font-feature-settingsプロパティは、OpenTypeフォントの文字詰めを行う機能です。OpenTypeフォントとは、現在アドビが提供しているフォントのこと。異なるプラットフォーム（WindowsやmacOSなど）仕様が異なるシステム上で稼働するフォントとなっています。
OpenType形式の主なメリットとしては、クロスプラットフォームで活用できること（同じフォントファイルをMacintoshとWindowsの両方で利用できます）、そして豊かな言語サポートと高度なタイポグラフィを可能にする広範な拡張文字セットとレイアウト機能を利用できることの2点が挙げられます。
OpenTypeフォントは、適切な文字の配置ができる機能＝拡張タイポグラフィの機能があり、それを利用して文字詰めを行うのが、このfont-feature-settingsプロパティなのです。
font-feature-settingsプロパティで利用できる値
font-feature-settingsプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| normal | 既定の位置でテキストを配置する |
| <feature-tag-value> | フォント機能の有効化・無効化を設定する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 48 |
| Edge | 15 |
| Firefox | 34 |
| nternet Explorer | 10 |
| Opera | 35 |
| Safari | 9.1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 4.4 |
| Android版Chrome | 48 |
| Android版Firefox | 34 |
| Android 版 Opera | 35 |
| iOS版Safari | 9.3 |
| Samsung Internet | 5.0 |
font-feature-settingsプロパティの基本的な使い方
font-feature-settingsプロパティの使い方
まずはfont-feature-settingsの基本の書き方を見ていきましょう。今回は一番違いが分かりやすい「游ゴシック」フォントを使用しています。
また、CSSの冒頭に@font-faceで、OpenTypeフォントを指定しています。font-feature-settingsはOpenTypeフォントで有効なプロパティなので、必ず設定してください。
See the Pen
font-feature-settings 基本 by rabbittyu (@rabbittyu)
on CodePen.
divタグで全体を囲い、divタグに游ゴシックのフォントを適用しました。次にpタグ内でclass属性を指定し、class名をそれぞれ設定しています。
font-feature-settings内では、設定する文字詰めとON/OFFを指定します。ON/OFFは1と0で切り替え、1が有効という意味になっています。
font-feature-settingsで設定できる値の一覧
ここではAdobe Fontsの公式サイトを参考に、font-fauture-settingsで指定できるフォントの値を一覧で紹介します。（一部省略）
合字
・liga -> 標準合字
・calt -> 前後の文字に依存する字形
・dlig -> 任意の合字
文字
・smcp -> スモールキャピタル（小文字と大文字の大きさが同じ）
・c2sc -> 大文字のスモールキャピタル
・swsh -> ひょろっとした文字
・salt -> デザイン性のある文字
数値
・lnum -> ライニング数字（文字の高さが均等）
・onum -> オールドスタイル数字（周囲の小文字と馴染むような字形）
・pnum -> プロポーショナル数字（文字ごとに幅を設定した字形）
・tnum -> 等幅数字
・frac -> 分数向きの字形
・ordn -> 上付き序数表記（1st,2nd,3rd）
日本語に有効な値
幅の異なる字形
・pwid -> プロポーショナル字形（文字ごとに幅を設定した字形）
・palt -> プロポーショナルメトリクス（自動文字詰め設定）
・pkna -> プロポーショナルかな
・fwid -> 等幅全角字形
・hwid -> 等幅半角字形
・halt -> 字幅半角メトリクス
・twid -> 等幅三分字形
・qwid -> 等幅四分字形
言語ごとに異なる字形
・trad -> 旧字体
・ruby -> ルビ用字形
・hkna -> 横組み用かな
・nlck -> 印刷標準字体
・nalt -> 修飾字形
・ital -> イタリック
縦書き字形
・vkrn -> 縦組みペアカーニング（隣り合う文字ごとに文字詰めが設定される）
・vert -> 縦組み用字形
・vpal -> 縦組みプロポーショナルメトリクス
・vhal -> 横組み字形半角メトリクス
・vkna -> 縦組み用かな
更に詳しくフォントについて学ぶには、Adobe Fontsの公式サイトを参考にしてください。
まとめ
今回は文字詰めによって、さらにサイトを見やすくするfont-feature-settingsプロパティについてご紹介しました。このプロパティはAdobeが公式で提供するOpenTypeフォントで有効な文字詰め設定です。
実はこのプロパティは多くのサイトで使用されていて、ユーザにとってより読みやすいテキスト文書を提供することができるのです。もしHTMLに慣れ、デザインを考える余裕がある方は、ぜひ導入してみてくださいね。
参考文献：
MDN web docks: font-feature-settings
文字詰めができるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング
font-feature-settings の文字詰めを考察する
CSS – font-feature-settings – とほほのWWW入門
1661128_font-family
CSSでのOpenType機能の構文
OpenType機能の使用
