CSSを使って役物文字の間を詰める方法【font-feature-settingsを使おう】

こんにちは。カスミです。

さて、以下のようなお悩みをお持ちでしょうか?

CSSだけで句読点(。、)やビックリマーク、クエスチョンマークなどの役物文字の間を詰めたい。

このようなお悩みを解決致します。

本記事ではCSSのプロパティ、font-feature-settingsを使って、役物文字の間を詰める方法について解説致します。

CSSでfont-feature-settingsを間を詰めたい文字にあてる。

font-feature-settings: "palt";

上記コードを役物文字の間を詰めたい要素に充てるだけでOK。

font-feature-settingsの値には【palt】を指定します。

以上で完了です。

font-feature-settingsが反映されない?

https://caniuse.com/?search=font-feature-settings

font-feature-settingsが反映されない場合は、ブラウザが対応していない可能性があります。

下記サイト様 Can I useより、ブラウザが対応されているか確認してみてください。
https://caniuse.com/?search=font-feature-settings

font-feature-settingsが使えない場合はYaku-Han-JPを試してみよう

https://yakuhanjp.qranoko.jp/

font-feature-settingsが使えないなら、Yaku-Han-JPを試してみてください。

こちらはCSSではなく、Webフォントを読み込む事で、役物を詰めてくれる優れものです。

導入方法はこちら↓↓

まとめ

CSSをあてるだけで、役物文字の間を詰めれる。font-feature-settings。

役物の間隔が空いてる事により、デザインが崩れる事が多々あるのでとても便利なCSSプロパティかと思います。

以上で解説を終わります。

Ads

関連記事

JavaScript プログラミング

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

更新日:2021.01.02
344
WordPress プログラミング

【簡単】wordpressプラグインで投稿記事を非公開予約する方法

2022.01.05
248
WordPress プログラミング

【簡単】投稿用カテゴリーの初期設定(未分類)を変更する方法

2022.03.31
17
プログラミング

【簡単】サイトからファビコンを取得・保存・ダウンロードする方法

更新日:2020.05.16
2735