Bonesのテーマでの謎の文字化け

WordPressで骨組みだけありとても便利なテーマ「Bones」

特定の文字だけが変化してしてしまう現象に遭遇しました。。。

結構、解決に時間がかかったので、記事として載せておきます。

Bonesとは

骨組みだけで構成してあるWordPressテーマです。

「_s」はまっさらですが、「Bones」は少しスタイルもついています。

また、開発のために「sass」のひな型が準備してあるので、スタイルの作成も行いやすいです。

公式ページのダウンロードボタンは「404ページ」に飛んでしまいます。

そのため、その上にあるGithubからのページからダウンロードしてください。

謎の文字化け

Bonesを試しでいろいろ触っている時に特定の文字だけ変化する現象に会いました。

「ます。」⇒「〼。」「野球」⇒(ボールになる)　のような不思議な現象です。

通常の文字化けであればもっと意味の分からんような文字列になるはず。。。

ということは「utf-8」の指定云々ではなさそうです。

開発者ツールで確認してみるとそこの文字は通常。。。

ということは表示された後に変えられてるのかと推測できます。

内臓されているjsを調べてみました。

しかし、骨組みのテーマにそんなjsが含まれているわけありません。

他に影響のあるところがCSSぐらいです。

あるわけないと思いながら調べていると

ありました。。。

-webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";

これでした。

合字の設定で環境依存文字に変換されているようです。

試しに「キログラム」とか打つと小さくコンパクトに表示されます。

不要な場合はこれらをコメントアウトして使用してください。

また、Saasを使用している場合はそちらもコメントアウトして利用しましょう。