ブラウザの種類やバージョンによって挙動がまちまちで、なぜそうなるのか良く分からなかったのですが、調べていくうちに文字コードやフォントの設定に関係あることが分かりました。
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 件のコメント:
コメントを投稿