概要
Wordpress のオリジナルテーマを作成する際、
Bones をベースに使用したらMacで確認した時に日本語が一部文字化けした。
その原因と、解決方法。
症状
以下、表示されていた文字の一例。
| 入力している文章 | ブラウザで表示された文字 |
|---|---|
| よろしくお願いします | よろしくお願いし〼 |
| スタートアッププログラム | スタートアッププロ㌘ |
| 新宿より徒歩10分 | 新宿ゟ徒歩10分 |
こんな感じでなかなかパンチの効いたサイトに。
原因
結論から書くと、CSSのプロパティが原因だった。
以下が該当項目だったので、それぞれコメントアウトして対応した。
_typography.scss
-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";
font-feature-settings ...って何?
CSS3から使えるようになった、新しいフォントオプション。
フォントフォーマットの1つ、OTF(Open Type Font)には組版に必要なタイポグラフィのオプション機能があるらしい。
それをWebでも使えるようにしよう、というプロパティ。
今回の場合、任意の合字の機能をオンにする"dlig"が設定されていために、
たまたま合字となるような文字列が連続して配置していた場合に化けてしまった模様。
日本語で使用する機会が無いからなかなか気づけなかった。。