Facebook Twitter RSS
ホーム ホームページ制作会社WEB企画 ウェブ企画ラボ HTML・CSS 〼(ます)や株式会社がiPhone(Safariなど)で特殊文字に変換される原因と解決方法

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

この記事のタイトルとURLをコピーする
〼(ます)や株式会社がiPhone(Safariなど)で特殊文字に変換される原因と解決方法
https://webkikaku.co.jp/blog/htmlcss/special-characters-in-safari/
facebook twitter hatena Pocket

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 を煮るなり削除するなりすることで解決します。

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

この記事のタイトルとURLをコピーする
〼(ます)や株式会社がiPhone(Safariなど)で特殊文字に変換される原因と解決方法
https://webkikaku.co.jp/blog/htmlcss/special-characters-in-safari/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
この記事が最新です
ページトップ