/ category-web

親方!Chromeで文字が記号に!


なんということでしょう、 ただのますが〼(枡記号)になっているではありませんか〜(棒読み)
他にもmlが㎖に、calが㎈に、ページが㌻になど、すごいことになっています。 どうやらGoogleChromeで見た時だけ、こうなっているようですが… な、なぜなんだ〜(棒読み)

CSSを確認

十中八九CSSが原因だろうな〜ということで、フォント関連の記述を探します。

font-familyかな?

そう思っていた時期がわたしにもありました。

body {
    font-family: "游ゴシック", YuGothic, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #666;
    -webkit-font-smoothing: antialiased;
}

とくにこれといって怪しい部分がない。フォントの謎表示は、だいたい欧文フォントが謎の働きをしている場合が多いのですが、今回はそういうわけでもなさそうです。

他のfont関連の指定は?

font-familyが関係ないっぽいので、他のfont関連の指定を確認してみます。
font-sizeやfont-weightなど明らかに関係なさそうなものを飛ばしていくと、この指定を発見。

 p {
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-before: 2;
    -webkit-hyphenate-after: 3;
    hyphenate-lines: 3;
    -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

font-feature-settingsは、OpenTypeフォントの機能を使ったり使わなかったりできる指定です。
「liga」と「dlig」が有効になっていましたが、この指定をすると、合字が使えるようになります。
今回は「dlig」を有効にしていたことが原因でした。は〜スッキリ。
というか、この指定って何かメリットあるのかな…?
サッパリわからないので、ligaの方も無効にしておきます。
(*・ω・)っ[font-feature-settingについて]

 

コメントを残す

CAPTCHA