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

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

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

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

font-feature-settings

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

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

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

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

・OpenTypeフォントであること

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

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

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

▼THANKS！

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