〼（ます）や株式会社がiPhone（Safariなど）で特殊文字に変換される原因と解決方法

先日、新しいテーマをガチャガチャとカスタマイズしているときに、沼にハマったものの、なかなか解決策が見つからなかったので、同じような状況に遭遇した方に向けての共有です。

症状

以下のような症状に陥っている方が対象です。

• 「〜ます」が特殊企業の〼（ます）で表示されてしまう
• 株式会社が㍿と表示されてしまう
• iPhoneのみで起こる（Chromeのディベロッパーツールだと正常表示）

要は、特殊文字にできそうなところは、片っ端から特殊文字に変換されてしまうし、ChromeのディベロッパーツールでiPhoneのユーザーエージェントにしているのにも関わらず、その場合は正常表示だし、なんでや！！という症状です。

ちなみにお恥ずかしい話ですが、〼を「ます」と読むことを、この記事の執筆中に初めて知りました。

↓症状の再現（iPhoneでの閲覧推奨）

See the Pen
font-feature-settings japanese bug by webkikaku (@webkikaku)
on CodePen.

原因は font-feature-settings かも

私の場合は CSS の font-feature-settings が原因でした。

font-feature-settings とはブラウザで表示される文字をカーニング（字詰め）してくれるCSS。

↓こんな感じでカーニングしてくれる

See the Pen
font-feature-settings demo by webkikaku (@webkikaku)
on CodePen.

カーニングをする分には問題ないんですが、「”liga”」が指定してある場合にハマります。

これは本来英文字なんかで「合字」といってタイポグラフィ目的のときによく使用されるんですが、この指定が入っていると、株式会社などを勝手に合字して表示しちゃうみたいです。

↓わかりにくいですが、下が合字

See the Pen
Trying to see if any google fonts support ligatures by Le Roux Bodenstein (@lerouxb)
on CodePen.

解決方法

なので、font-feature-settings を煮るなり削除するなりすることで解決します。

以上同じような症状の方の助けになれば幸いです。