Written by Kasumi

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プロパティかと思います。

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

目次

関連記事

WordPress プログラミング

カスタム投稿タイプのターム(カテゴリー)の初期設定を変更する方法

2022.04.01
564
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
2365
WordPress プログラミング

【ワードプレス】親子カテゴリ・親子ターム順にリンクリストを自動で表示する方法

更新日:2022.05.31
1186
HTMLCSS

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
308