font-feature-settingsは、OpenTypeフォントの文字詰めを行う機能があります。
等幅で表示されるOpenTypeフォントを自動カーニングしてくれので、大きくサイズ指定した見出し等に使用するとより引き締まって見やすくなります。
使い方は簡単！自動文字詰め設定は下記を指定するだけです。
.sample {font-feature-settings: "palt";}
上が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"; -> 等幅四分字形
ほとんどのブラウザに対応しているので、機会があったら使用してみてください。
PR
ニッチなテーマのイラスト素材を投稿中！ぜひご利用ください。
ナマケモノなど可愛いイラストをイラストACで無料配布中！
オリジナル絵本をKindleで出版！
ナマケモノのふにゃまるちゃんを読む困ったときは格安で依頼！RU DESIGNも出品中
格安レンタルサーバーでサイト運営を始めよう
ドメイン取得は一括管理が便利！
応援・支援よろしくお願いします！サイト運営に活用させていただきます。
Braveクリエイターサポート
関連記事
