【WordPress】Mathjaxで書いた分数の線がずれる ~フォントの変更方法とおすすめ~

その他

症状と原因

症状 Mathjaxで分数を書いたとき、次の画像のように、分数の線が少し下にずれて不格好になってしまう。ひどいときは分母の文字に分数線が被る。

私の環境ではMacやiPhoneで開くとこのような現象が起き、Windowsでは通常通り表示された。

原因 明確な原因は不明だが、フォントとMathjaxとの相性に問題がある可能性が高い。特にMacやiPhoneでよく使われるヒラギノ系の和文フォントを用いるとこのような問題が生じる。WindowsではメイリオやMSゴシックなどのフォントが使われることが多いので、同じWebサイトでも同様の問題が起きなかった。

解決策とおすすめの font-family

解決策としては、font-familyを書き換えて、ヒラギノ系のフォントが使用されないようにする。MacやiPhoneではゴシック系のフォントはヒラギノが主流のため、欧文だけをArialやHelveticaなどに変更して問題は解決した。

font-familyとはWebサイトを表示する際に、用いるフォントの優先順位をブラウザに指示するために、フォント名を書き並べたリストのこと。

結論から言うとstyle.cssに次のコードを書き加えるのがおすすめ。

/*フォント修正*/
body {
font-family: "Arial", "Helvetica Neue", "Helvetica", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

コードを書き加えたらどの記事でも良いから「更新」しておく。これをしないと変更が反映されない。(ほかにももっと楽に反映させる方法はあるかもしれないが、今のところよく分からない)
1つの記事を更新すれば他の記事にも同じようにstyle.cssの変更が反映される。

コードのポイント 

  • 基本的には無難なフォントだけで構成した。肝心なのは順序。
  • 欧文にもヒラギノ系のフォントが来るとまずいので、少なくとも”Hiragino Kaku Gothic ProN” や “Hiragino Sans” よりも前に Arial や Helvetica といった欧文フォントを持ってくる。
  • Windowsの場合、和文フォントのメイリオ(Meiryo)でも問題なく分数が表示されるが、Arial や Helvetica を用いた方が、数式が少しだけスタイリッシュになるので、Meiryoもこの2つの欧文フォントの後ろに書くのおすすめ。

ヒラギノはMac/iPhone/iPadの主流和文フォント、MeiryoはWindowsの主流和文フォント。ArialはWindowsにもMac等にも対応しているので、Helveticaはなくても良いかもしれないが、念のため入れておいた。ちなみにHelveticaはArialと殆ど同じフォントでMacで用いられる。
よってこのfont-familyを用いれば基本的には、Macでは Arial(欧文)+Hiragino(和文)、WindowsではArial(欧文)+Meiryo(和文)となる。

参考画像は以下の通り。

↑欧文ヒラギノが使われているので分数線がずれている

↑分数線が直っている

↑Windowsであれば問題は起きないが、数式が少し大きく感じる

↑Windowsでも欧文にArialを使うことで数式が多少スタイリッシュになる

その他の補足事項

フォントの英語表記と日本語表記は2つ書かなくてもよい。昔は”Meiryo”と”メイリオ”の両方を書かないと動作しないことがあったらしいが、最近のPCではどちらか一方で問題なく動作する。

↓各フォントの説明

  • Arial:Mac/Windowsともに使える王道の欧文フォント
  • Helvetica (Neue):Macでよく用いられる有名な欧文フォント。Neueがついたものは昔ながらの字体でついていないものは略字体らしい。略字体には批判もあるらしいのでNeueを優先。
  • Meiryo:Windowsで一般的な和文フォント。
  • Hiragino Kaku Gothic ProN/Hiragino Sans:Macで一般的なヒラギノ系の和文フォント。ヒラギノにはいくつか種類があるが、コードで示した2つをこの順で書くのが良いらしい。
    (参考:2022年に最適なfont-familyの書き方
  • sans-serif:ゴシック体のフォント全般を指す総称フォント。ブラウザでデフォルトとして扱われているゴシック体のフォントを用いる。アンドロイドなどで対応するフォントがない場合に備えてのダメ押し。

参考記事

【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
↑フォントの書き方について基礎から詳しい解説

2022年に最適なfont-familyの書き方
↑font-familyの構成の仕方について論理的に説明してくれている

コメント

タイトルとURLをコピーしました