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

HTML・CSS 最終更新日:2020/02/14 公開日:2019/02/05

special-characters-in-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.

一般的な合字/標準合字(liga)
https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#liga

解決方法

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

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

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者にお代わりいたします。

東京オフィス

営業時間|9:00~17:00(土・日・祝除く)

03-6822-7344