【備忘録】CSSで約物半角を再現したい。

こんにちは、ワタナベです。

今回はCSSで約物半角を再現する備忘録です。

PhotoshopやIllustratorのテキストの設定で「約物半角」というものがあります。
約物、つまり記号類を半角にしてくれる設定です。文字を詰めることができます。
それをCSSで再現します！

font-feature-settings

テキストに「font-feature-settings: “palt”;」を設定するだけ。簡単です。

しかし、フォントによって効かないものがあります。以下をご確認ください。

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

よく登場するもの、使うものをピックアップしてみました。
各フォント、上段が未設定のもの、下段が「font-feature-settings: “palt”;」設定のものになります。

font-feature-settingsの設定が使えるフォントは、

・OpenTypeフォントであること

・プロポーショナルメトリクス情報が含まれていること

の2点をクリアしてるもののみらしいです。

「font-feature-settings: “palt”;」が効かないフォントを使用して約物半角を再現したい…という場合は、「約物半角専用のWebフォント」というものもありますので是非ご覧下さい(^^)/

 Yaku Han JP - 約物半角専用のWebフォント  128 users

Yaku Han JP - 約物半角専用のWebフォント

https://yakuhanjp.qranoko.jp

Yaku Han JP（ヤクハンジェイピー）は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。

▼THANKS！

 ICS MEDIA  283 tweets 158 users

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい...

https://ics.media/entry/14087/

「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの1つとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feat...

それではまた次回。
ご閲覧ありがとうございました♪