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

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

目次

関連記事

HTMLCSS プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
6584
WordPress プログラミング

【wordpress】トップページとは別に投稿一覧(アーカイブページ)を用意・表示する方法

2022.01.11
2365
HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
571
WordPress プログラミング

【WordPress】is_single()、is_singular()条件分岐について使い方を解説

2022.04.21
1199