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

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

CSS, 技術メモ

2021/08/12
文字詰めで美しく!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"; -> 等幅四分字形

 

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

 

ホームページ制作ならRU DESIGN
ドメイン取得は同じところで取得しておくと便利ですよ。 お名前.comは1円から購入できるドメインがあるので、いろいろと便利で経済的です。

関連記事

アスペクト比を指定し保持できるaspect-ratio
アスペクト比を指定し保持できるaspect-ratio
2022/07/05
YouTubeなどの動画を埋め込む際、そのまま貼り付けるとスマホなどモバイルで表示した際にはみ出てしまいます。テーマによっては、レスポンシブに対応しているかと思...
WordPressのリビジョン機能を制御 
WordPressのリビジョン機能を制御 
2022/07/05
ワードプレスにはリビジョンという、記事の編集中に変更した履歴を保存する機能が標準にあります。 これは、下書きや公開済み投稿の更新記録を自動で保存してくれるもので...
CSS フィルター効果の応用
CSS フィルター効果の応用
2022/07/05
CSSのfilterプロパティを利用したフィルター効果一覧の記事を書きましたが、今回は応用的な使い方をごしょうかいします。 複数のフィルター効果を使用 複数の効...
CSSのfilterプロパティを利用したフィルター効果一覧
CSSのfilterプロパティを利用したフィルター効果一覧
2022/07/04
前回の記事CSSのみでテキストや画像にぼかし効果を付けるでは、ぼかし(ブラー)効果について書きました。今回はその他のフィルター効果をご紹介します。 HTMLでの...
CSSのみでテキストや画像にぼかし効果を付ける
CSSのみでテキストや画像にぼかし効果を付ける
2022/07/04
テキストや画像にぼかし(ブラー)効果をつけたい時に、画像加工をしなくてもCSSのfilterプロパティを利用して同様の効果を表現することができます。 <d...
LINEからもお問い合わせできます

お問い合わせ

制作依頼。業務委託・webや広告に関することなどお気軽にお問い合わせください。

    必須 お名前

    必須 メールアドレス

    必須 お問い合わせ内容

    必須 メッセージ本文

    このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。