Help us understand the problem. What is going on with this article?

サイトの文字コードは揃っているのに意図しない文字化けが起こった話

More than 3 years have passed since last update.

概要

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"が設定されていために、
たまたま合字となるような文字列が連続して配置していた場合に化けてしまった模様。
日本語で使用する機会が無いからなかなか気づけなかった。。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away