font-feature-settings と font-variant

今日初めて知った。

【HTML】WEBサイトを読みやすくするカーニング方法まとめ【CSS】 | viviON Design

この記事がわかりやすくて読んだ。

letter-spacing ではなくいい感じのカーニングが CSS でできるみたいな感じのイメージで、これは便利では……？と思っていたら takanorip さんがリプライをくれた。

そのドキュメントの中にも書いてありますが、font-feature-settings はOpen Typeの機能をコントロールするプロパティなので取りうる値はW3CではなくOpen Typeで定義されてます。https://t.co/Xg5Fa0n0TP

— takanorip (@takanoripe) August 15, 2022

このプロパティはけっこう前から存在していますが、適用されているフォントがOpenType形式でないと適用されず、近年はWebフォントの台頭でwoff2形式のフォントが使われることが多くなったのでこのプロパティの影が薄くなっているという事情があります。

— takanorip (@takanoripe) August 15, 2022

OpenType のフォント (OTF) にしか適用できないとのこと。

なるほど、実際のところあまり耳にしないなと思っていたのはそういう理由なのかな。

font-feature-settings - CSS: カスケーディングスタイルシート | MDN

MDN にも、

可能な限り、ウェブの作者は代わりに font-variant 一括指定プロパティ、または関連する個別指定プロパティである font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, font-variant-position プロパティを使うべきです。

と書いてある。

これらは font-feature-settings よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 font-feature-settings は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に font-feature-settings を使うべきではありません。

ふうむ。

もちろん使うなということではないんだけど、こう MDN に言われると font-variant のほうをいい感じにすべきという風潮を感じる。

font-variant-ligatures - CSS: カスケーディングスタイルシート | MDN

font-varint で font-feature-settings を代替できる感じはないが、カーニングという意味合いだと font-varint-ligatures が近いのかなと思う。

ligature は結びつけるという意味で、この MDN の記事でいう合字のことだろう。

fi, ffi, th などの、よくある合字を制御します。 OpenType の値 liga および clig に対応します。2 つの値が指定できます。

font-variant-ligatures: no-common-ligatures; で小文字の i の点が消えないようにする、みたいなことはできるっぽい。