アクセス解析 うわっ!ChromeとIEとFirefoxの書体の違いと雰囲気の大差

うわっ!ChromeとIEとFirefoxの書体の違いと雰囲気の大差

スポンサーリンク



うわっ!ChromeとIEとFirefoxの書体の違いと雰囲気の大差

1Chromeトップ_全画面キャプチャ 20150930 195616私はお仏壇のご紹介サイトでWordPressの「WP FanZone」というテーマを使用しているのですが、今までご紹介のお仏壇の商品数を増やすことばかり気になっていて、日常的につかっているGoogle Chromeとスマートフォン以外のブラウザでは見たことがありませんでした。今日、たまたまIEで開いて見てみたら、書体が違っていて普段見慣れているのとは、雰囲気があまりに違うので愕然!なんていうかIEで見てみると、かなり昔っぽくてしょぼい感じなのです・・・試しにFirefoxで見てみても同じでした。以下を上の大きな画像と比べてみてください。

IE 11で見た外観 ※クリックすると拡大します

Firefox 41.0で見た外観 ※クリックすると拡大します

タイトルもメイリオじゃなく、昔っぽい普通のゴシックで古臭い感じがするし、各記事のタイトルも同様です。好みの問題もありますが、サイトのタイトルは百歩譲って許すとしても、IEやFirefoxだと各記事のタイトルもゴシックで、しかもギザギザしていてなめらかじゃないし、特に漢字が多いタイトルになると、妙に田舎っぽくて我慢なりません^^今どきないですよ~、こんなの(汗)・・・

Google Chrome で見た個別記事のタイトル ※クリックすると拡大します

IE 11 で見た個別記事のタイトル ※クリックすると拡大します

Firefox 41.0で見た個別記事のタイトル ※クリックすると拡大します

前から和文と英数字のアンバランスも気になっていたので、ここでちょっと奮起。よさげなfont-familyの設定をネットで探し、面倒そうなので手つかずだった「子テーマ」もこの際つくり、Style.css のありとあらゆるfont-familyの設定を書き換えましたが、本文や見出し文字は直っても、肝心のサイトタイトルや個別記事のタイトルが一向に直りません。

ですがこれは、このテーマがそもそもh1~h6までの書体指定をしておらず、そのため各ブラウザがデフォルトの文字を表示させているのではないかと思いました。なので少し勇気が要りましたが、思い切って以下の設定を新規に追加してみました。

h1,h2,h3,h4,h5,h6 {
font-family: “Calibri”,”メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,Hiragino Kaku Gothic Pro,”MS Pゴシック”,sans-serif;
}

直りました!

英数字を優先する先頭のCalibriは最初Arialにしたのですが、文字幅が変わってレイアウトが崩れることがわかったので、少し字面の小さいフォントに差し替えました。入っていない方も世の中にはいらっしゃるでしょうが、この場合の一番の目的は「自分が見て心地いい」ことなので(笑)、ここは自己都合を優先してしまいました。すみません。あと今回はMacを全然考慮していないので、そちらも合わせてごめんなさい・・・

設定を変えてみて思いましたが、やはり外国製のテーマは日本語フォントのことを考えてつくられていないので、実際にCSSを見てみると、見たことも聞いたことがないようなフォント名がいっぱい。

font-family:’Lato’,Verdana, Geneva, sans-serif;
font-family: ‘Oswald’, sans-serif;
font-family: “Courier 10 Pitch”, Courier, monospace;
font-family: Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;

と言われても、なんのことやら、さっぱりですよ(^_^;)

Google Chrome 45で見た修正後の外観 ※クリックすると拡大します
ChromeSQ_全画面キャプチャ 20150930 211324

IE 11で見た修正後の外観 ※クリックすると拡大します
IESQ_全画面キャプチャ 20150930 211410

Firefox 41.0で見た修正後の外観 ※クリックすると拡大します
FirefoxSQ_全画面キャプチャ 20150930 211443

かねてから気になっていた英文と和文のアンバランスも多少改善して、めでたしめでたし。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする