Menu
テーマ切り替え

文字詰めで美しく!CSS - font-feature-settings

SS

font-feature-settingsは、OpenTypeフォントの文字詰めを行う機能があります。 等幅で表示されるOpenTypeフォントを自動カーニングしてくれので、大きくサイズ指定した見出し等に使用するとより引き締まって見やすくなります。

使い方は簡単!自動文字詰め設定は下記を指定するだけです。

.sample {font-feature-settings: "palt";} font-feature-settings サンプル

上がfont-feature-settings: “palt”;で自動カーニング。下は何もせず表示させたものです。 見比べてみると一目瞭然ですね。

font-feature-settingsのパラメータは結構な数があるのですが、日本語フォントだと下記が使用しやすいかなと思います。

font-feature-settings: "pwid"; -> 文字ごとに幅を設定した字形 font-feature-settings: "pkna"; -> プロポーショナルかな font-feature-settings: "fwid"; -> 等幅全角字形 font-feature-settings: "hwid"; -> 等幅半角字形 font-feature-settings: "halt"; -> 字幅半角メトリクス font-feature-settings: "twid"; -> 等幅三分字形 font-feature-settings: "qwid"; -> 等幅四分字形

ほとんどのブラウザに対応しているので、機会があったら使用してみてください。

RU DESIGN
AUTHOR

RU DESIGN

個人開発者として、Webサイト制作やAIを活かした開発に取り組んでいます。このブログでは、私が実際に試して「これは使える!」と思った技術や、自作の便利ツールをシェアしています。一緒に技術を楽しんでいきましょう!

この記事をシェア:

関連記事