文字詰め問題をCSSで解消できないか?

ひと昔前まで「ホームページ上で文字詰めは無理」という風潮でしたが、最近はブラウザの差異が無くなってきたこともあり、今では積極的に取り入れているCSSが「font-feature-settings」です。
「font-feature-settings」は、OpenType フォントの特定の機能を利用して主にグラフィックデザイナーが喜びそうな文字組みを実現する場合に役立ちます。

基本的な使い方

クライアントからの原稿とかで「(カッコ)」が半角になってるものを良く見ます。個人的にアレ高さ揃わなくなるので気持ち悪く感じるんですよね。。そんなイライラからも解消されます。

<p>文字詰め(自動カーニング)問題をCSSで解消できないか?</p>
p {
  font-feature-settings: "palt";
}

通常:文字詰め(自動カーニング)問題をCSSで解消できないか?

適応:文字詰め(自動カーニング)問題をCSSで解消できないか?

旧字体への変換

使いどころとしては名前などでしょうか?「斉藤」さんとか。

<p>使いどころとしては名前などでしょうか?「斉藤」さんとか。</p>
p {
  font-feature-settings: "palt" 1, "trad" 1;
}

通常:使いどころとしては名前などでしょうか?「斉藤」さんとか。

適応:使いどころとしては名前などでしょうか?「斉藤」さんとか。

その他のオプション機能

そのほか筆記体や合字といったオプションがありますので一度目を通したほうが良いかもしれません。
アドビ「CSS での OpenType 機能の構文」

上部へスクロール