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

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

目次

関連記事

プログラミング

映画ターミネーター ニュー・フェイトのあらすじ・感想を解説。2の続編!【最後にネタバレ有り】

2020.03.02
1035
WordPress プログラミング

【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

更新日:2021.10.26
2205
HTMLCSS

CSSでダウンロードしたフォントを読み込む方法【@font-faceを使おう】

2023.10.20
191
PHP プログラミング

phpを使って、ヘッダーやフッターを共通パーツ化・インクルードさせる方法

更新日:2023.09.15
1206