Blog

バウンド・ワークスのブログでは、僕たちの考え方や、ちょっと役に立つ情報をお届けしています

困った・操作方法

iOSのブラウザで☒という文字化けが発生する(文字に被って表示される)

iOSのブラウザで☒という文字化けが発生する(文字に被って表示される)

iOSで文字化けが発生してしまう場合の対処法

iOS以外のブラウザは問題ないのに、iOSのブラウザアプリだと、いわゆる「豆腐化」してしまうという場合。

参考:iOSのみで文字化けが発生する問題(teratail)

こちらのteratailの質問と回答を発見。
投稿者のように文字のカーニングを調整する「font-feature-settings」に値が設定されていないことが原因でした。
問題が発生しているサイトは、olタグないのli要素のみだったため、該当する要素に

font-feature-settings: “tnum”;

を設定し、文字化けは無事解消されました(ダブルクオーテーション必須)

ちなみに、「font-feature-settings: normal」とか「font-feature-settings: unset」のような設定では、文字化けは解消されず(当たり前ですが)。
適宜、デザインや状況に応じたカーニング処理を実施すれば解決できると思います。

font-feature-settingsについて
OpenType フォントの拡張タイポグラフィの特性を変更したり制御するために必要とのことですので、iOSのフォントである「ヒラギノ」に関係するのかもしれません。

どなたかのお役に立てれば幸いです。

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

signpost

ブログにて情報を配信しています。

バウンド・ワークスでは、日々インターネットと格闘する皆様のために、役に立つ情報をブログにてお届けしています。ご質問などがございましたら、お気軽にご連絡ください。皆様のお役に立てれば幸甚です。

お問い合わせ

まずは一度、お気軽にお問い合わせください。




ご連絡をお待ちしております

私たちはまず、あなたのビジネスを徹底的に理解することから始めます。あなたのビジネスを理解することなく施策を展開することは不可能だからです。その後に徹底して見える化したデータを元に、あなたと一緒に結果を出す施策を考案してまいります。

お断り

当社は即効性のある特効薬を提供するわけではございません。しかしながら、時間とコストをかけた投資に見合っただけの成果をご提供させていただきます。