月曜日, 4月 27, 2009

記号文字のフォントサイズが小さいのはなぜか

前までいい感じで表示されていた○や×や△が、ひらがなや漢字に比べて小さくなってしまったり、なんだか汚く表示されるようになる現象。
ブラウザの種類やバージョンによって挙動がまちまちで、なぜそうなるのか良く分からなかったのですが、調べていくうちに文字コードやフォントの設定に関係あることが分かりました。
UTF-8でのサイト制作時、特にcssに関して気をつけることを以下にまとめます。

■cssファイルもUTF-8にして、文字コード宣言を記述する

基本的にファイルの文字コードは全て揃えたほうが良いようです。
cssファイルの場合、UTF-8にするだけでなく、cssファイルの1行目に

@charset='utf-8';


と宣言します。

■cssファイルがShift_JISの場合は、その旨を1行目に宣言する

cssファイルの文字コードを変更したくない場合は、Shift_JISの宣言を記述します。

@charset='shift_jis'


■日本語フォントを英文フォントより先に記述する

cssファイル内でbody等にfont-familyを指定するとき、優先して欲しいフォントを先に記述します。(クライアントは持っているフォントの中で、一番先に記述されたフォントを使用するため)
例えばMS PゴシックもArialもパソコンに入っている場合、

body {

font-family : 'MS Pゴシック', Arial, sans-serif;

}


と記述するとMS Pゴシックで表示されます。

■日本語フォントのアルファベット表記の全角/半角に注意

'ヒラギノ角ゴ Pro W3'のアルファベット部分「Pro W3」は半角ですが、
'MS Pゴシック'等の「MS P」は全角です。

■ブラウザの設定が優先されている場合は、反映されない

サイト側でいくらきちんと指定していても、ブラウザの設定で無効にされていれば反映されません。
ブラウザの設定は以下のような具合に変更できます。

IE:ツール→インターネットオプション→全般タブ→ユーザー補助→書式設定
Firefox:ツール→オプション→コンテンツタブ→フォントと配色→詳細設定→Webページが指定したフォントを優先する


これで記号文字がきれいに表示されるはずです。

0 件のコメント: