---
title: "iOSのブラウザで☒という文字化けが発生する(文字に被って表示される)"
description: "BoundWorksのNOTE「iOSのブラウザで☒という文字化けが発生する(文字に被って表示される)」。2019-08-16公開。"
url: "https://boundworks.net/ios-safari-garbled/"
language: "ja"
date: "2019-08-16"
---

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

公開: 2019-08-16

![アイキャッチ画像](https://boundworks.net/images/bb4cdf5da3c277bf2eb05dd7be5bb7f4.png)

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

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

参考：[iOSのみで文字化けが発生する問題（teratail）](https://teratail.com/questions/188224)

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

font-feature-settings: “tnum”;

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

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

[font-feature-settingsについて](https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings) OpenType フォントの拡張タイポグラフィの特性を変更したり制御するために必要とのことですので、iOSのフォントである「ヒラギノ」に関係するのかもしれません。

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