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

 

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

 

当サイトはPWYW(Pay what you want)方式を採用しています。
この記事が参考になったり、サイト全体をご評価いただいた場合にお支払い頂ければ幸いです。
金額は自由に決められます。 PayPalで支払い
WP制作ならRU DESIGN

お気軽にお問い合わせください!

WordPressのカスタマイズや修正、オリジナルテーマの作成などリーズナブルな価格でご提供します。 お気軽にご相談下さい。 お問い合わせはこちら

関連記事

ブログにYouTubeのギャラリーを簡単に表示!YotuWP
ブログにYouTubeのギャラリーを簡単に表示!YotuWP
2021/09/12
ブログやサイトにギャラリー風のYoutubeページを追加するのに適しているプラグイン「YotuWP」 YouTubeの動画は埋め込みでページに表示させる事ができ...
Twitterのシェアリンクのテキストにハッシュタグやスペースを追加、ついでにWordPressで使用方法
Twitterのシェアリンクのテキストにハッシュタグやスペースを追加、ついでにWordPressで使用方法
2021/08/28
Twitterのシェアリンクにハッシュタグやスペースを追加する方法です。   基本的なシェアリンクのURL https://twitter.com/s...
Yoast SEOのディクリプションで使用できるタグ一覧
Yoast SEOのディクリプションで使用できるタグ一覧
2021/08/14
ワードプレスでサイト制作時に、有名なプラグイン「All in One SEO Pack」を使用していましたが、ここ数年は「Yoast SEO」がお気に入り。プラ...
WordPress ECサイトプラグイン Welcartのv2.3.0公開
WordPress ECサイトプラグイン Welcartのv2.3.0公開
2021/08/11
WordPressにECサイトを構築する、プラグイン「Welcart」のv2.3.0が公開されました。 v2.3.0の主な修正・追加内容 2021年8月11日現...
Bootstrap 5 Alpha 2リリース
Bootstrap 5 Alpha 2リリース
2020/10/12
2020年9月29日にHTML/CSS/JSフレームワークBootstrapの最新アルファ版「Bootstrap 5 Alpha 2」がリリースされました。 ア...