ブログをきれいに表示するためにフォントを指定する 【CSS,font-family】

  • 投稿 : 2011-12-14
  • 更新 : 2013-11-10
海外の人が作ったと思われるWordPressやBloggerのテンプレートをそのまま使うと、日本語表示ではきれいに表示されないことが個人的には多いなと思います。原因は、日本語フォントが明示的に指定されていないからだと思われます。

そこで、フォント指定をして、お手軽に表示確認を行う時に私が使っている方法です。

■方法その1
bodyタグの後ろに以下の部分を挿入する
<style>
body{
  font-family:Helvetica,Arial,'ヒラギノ角ゴ Pro W3','メイリオ','MS Pゴシック',sans-serif;}
</style>
■方法その2
bodyタグの後ろに以下の部分を挿入する
<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf('Mac OS X')>-1) {
  document.write("<style> body {font-family:Helvetica,Arial,'ヒラギノ角ゴ Pro W3',sans-serif; } </style>");
}else{
  document.write("<style> body {font-family:Helvetica,Arial,'メイリオ','MS Pゴシック', sans-serif; } </style>");
}
// -->
</script>
最終的にテンプレートを修正する場合は、方法1のフォント順で問題ないと思います。
方法その2のような手段を使って、機種毎?に細かく指定してもよいとは思います。

【参考にした記事】
cssのフォント指定を再考するぜ2011 autumn | DAICHIFIVE blog
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
覚書 » Webfontの振り分け
IEでCSSで指定してもフォントのサイズが小さくならない


スポンサーリンク