Menu
テーマ切り替え

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

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

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"; -> 等幅四分字形

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

Share:

RU DESIGNの無料Webツール集

画像処理、テキスト整形、AIツールなど、制作や作業を効率化する便利ツールをブラウザで無料公開中!

ツールを見る →
Contact & Request

お問い合わせ・お仕事のご相談

Webサイト制作、システム開発、サイト保守・改善などのご依頼や技術的なご相談を承っております。専用フォームよりお気軽にご連絡ください(2営業日以内にご返信いたします)。

フォームより24時間受付 初回ご相談・お見積り無料 全国オンライン対応
RU DESIGN
AUTHOR

RU DESIGN

Webサイト制作・システム開発・保守運用を手がけています。一般からナイト系まで幅広く対応し、制作で培った実践的なノウハウや技術知見、自作Webツールも公開中。制作のご相談もお気軽にどうぞ。