LoginSignup
0
0

More than 3 years have passed since last update.

日本語フォントでもOK!?自動カーニング(字間調整)できるCSSがすごい!

Posted at

どうも7noteです。フォントによる字間の悩みはこれで1発解決!

様々な日本語フォントがありますが、フォントによって1文字の大きさが違い、いざ実装してみるとなんだかやぼったい感じ(ダサい)の文字の並びになってしまうことが気になるあなたへ。

特にデザイナーからWEBのコーディングも始められた方は

「cssで字間の自動調整ってできないの?」

と思われる方もいるかも。そんな方へ朗報です。
デザイナーから字詰めを迫られていたコーダーの人も、朗報です。

font-feature-settings: "palt"を使うことで、自動で字間調整してくれる。

プロポーショナルメトリクスが有効になるフォントであれば、この指定を入れるだけで一発で自動カーニングをしてくれるようです!しかもほぼ全てのブラウザで対応。

.palt {
  /* プロポーショナルメトリクスと旧字体指定 */
  font-feature-settings: "palt";
}

Can I useで確認しても主要ブラウザは全て対応。
image.png

(設定前と設定後のテキストを比較。)
image.png

全体的に指定ありの方が余分な隙間がキュッとしまった印象になります。

まとめ

font-feature-settings: "palt";の指定が使えるフォントは限られているようなので、指定しても「あれ?効かない?」と思ったらこちらのサイトに綺麗に情報がまとまっていますのでこちらを見ていただくといいかもしれません。

参考サイト:https://ics.media/entry/14087/

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0