CSS font-feature-settings ジェネレーター
OpenType機能を視覚的に選択してCSSコードを生成
機能選択
標準リガチャ (liga)
fi, fl などの標準的な合字
✓
任意リガチャ (dlig)
装飾的な合字
文脈依存リガチャ (clig)
文脈に応じた合字
歴史的リガチャ (hlig)
歴史的な合字
ライニング数字 (lnum)
等幅の数字（表組みに最適）
オールドスタイル数字 (onum)
本文に馴染む数字
プロポーショナル数字 (pnum)
可変幅の数字
等幅数字 (tnum)
固定幅の数字
スラッシュ付きゼロ (zero)
0とOを区別するゼロ
分数 (frac)
1/2 を分数表示
スモールキャップ (smcp)
小文字を大文字の小さい形に
大文字→スモールキャップ (c2sc)
大文字も小さくする
スワッシュ (swsh)
装飾的な文字
文脈依存字形 (calt)
前後の文字に応じた字形変更
大文字用記号 (case)
大文字に合わせた記号位置
カーニング (kern)
文字間の調整
✓
縦書きカーニング (vkrn)
縦書き時のカーニング
上付き文字 (sups)
x² など
下付き文字 (subs)
H₂O など
序数表示 (ordn)
1st, 2nd など
プレビュー
The quick brown fox
0123456789 1/2 3/4
fi fl ffi ffl ft
HELLO World
※ 表示結果はフォントのOpenType機能サポート状況に依存します
生成CSS
font-feature-settings: "liga" 1, "kern" 1;
使用例
.elegant-text {
font-feature-settings: "liga" 1, "kern" 1;
font-family: "EB Garamond", serif;
}font-feature-settings とは？
OpenTypeフォントの高度なタイポグラフィ機能を制御するCSSプロパティです。 リガチャ、数字のスタイル、スモールキャップなど、フォントに内蔵された様々な機能を有効化できます。
注意: 機能の利用可能性はフォントに依存します。 Google Fonts では EB Garamond、Playfair Display、Source Code Pro などが多機能です。