ぼくがかんがえた、ぼちぼちのfont-family指定

2017年5月19日Wordpress

この記事のURLとタイトルをコピー
お使いの端末ではこの機能に対応していません。
下のテキストボックスからコピーしてください。

どーも！カゴブロ（@kagoblo）です。

ぼちぼちのfont-family指定

結論からになりますが、フォントは指定しない。
いまだにそれなりのユーザーがいる古いIEのための対策だけはするという、わりとシンプルなものに落ち着きました。

それぞれスタイルシート内とHead内に以下のように記述します。

css: 

body{
	font-family: sans-serif;
}

さらに古いIE対策として、IEだけに適用されるHTML「条件付きコメント」を使いました。
「条件付きコメント」はIE5～IE9に対応してるそうです。
あまり詳しくないですが、むにゃむにゃ。。

<head>
........

<!--[if IE]>
	<style type="text/css">
		body {
			font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
		}
	</style>
<![endif]-->

........
</head>

ブラウザ表示フォントの違和感

ブログをカスタマイズしてると、フォントの表示にうーむってなることないですか？
私はあります。

よくあるfont-familiy指定はこんな感じですかね？

font-family:	Helvetica, Arial, Verdana, "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,
		"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

ちょっと極端な例ですが。。。
（イマドキOsakaって。。。）

私は普段使っているブラウザではフォントを変更して表示しているので、
他所のブログを見ているときに、おやっと思うこともあります。

WindowsでDTPをされる方などはヒラギノで表示されてつらい思いをしたことある方が結構いそうですね。

私のブログを訪れる方には同じ思いはさせたくない！！

ということで、font-family指定について調べてみました。

以下の記事。特にコメント欄を参考にさせていただきました。
非常に熱く語ってらっしゃいますね。
http://kirmav.blogspot.jp/2012/12/cssfont-family.html

それらを踏まえた上で出た結論が一番上に書いたものです！

いろんな環境でチェックしたわけではないので、ここがおかしいなど指摘あればコメントお願いします！

web fontについて

GoogleとAdobeが共同開発したという
Noto Sans （Source Han Sans 〈源の角ゴシック〉）というフォントは非常に未来があるなぁと思います。

現状ではwebフォントは読み込みに時間がかかるのであまり使う気が起きないですが。。。

興味のある方は以下の記事が参考になると思います！
http://bamka.info/webfont-weight-saving

こちらの記事もどうぞ

WordpressCSS, Font, ブログカスタマイズ

Posted by カゴブロ