日本語フォント名の「英・和」指定

font-familyプロパティで、日本語フォント名を「英・和」指定するのも、最近よく見られる傾向です。たとえば「ヒラギノ角ゴ Pro W3」というフォントは、日本語名だけでなく「Hiragino Kaku Gothic Pro W3」という英語名もあわせて指定しておくのです。

@charset "UTF-8";  
/* reset styles */
  html, body, div, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, address,
 ul, ol, li, dl, dt, dd,
 table, th, td, form, fieldset { 
  margin: 0;
   padding: 0;
   color: #222222;
   font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; 
} 

さらに、クロスブラウザ表示を実現するうえで、「フォントの種類」や「フォントサイズ」がかなり曲者ですので、セッティング方法を覚えておくと便利です。

まず、フォントの種類について、Windows版 Internet Explorer 6と7は、フォールバックメカニズムがうまくきかない、という問題があります。複数の種類を指定した場合、先に書かれているものから優先的に適用し、もし指定されたフォントがパソコンになければ、あとに書かれているものを適用してくれる、というしくみが「フォールバック」です。

たとえば「ヒラギノ角ゴ Pro W3」「メイリオ」「МＳ Ｐゴシック」の順で書かれている場合、「ヒラギノ角ゴ Pro W3」がなければ「メイリオ」を、「メイリオ」もなければ「ＭＳ Ｐゴシック」が適用されるはずです。しかし、Windows版 Internet Explorer 6と7は、「ヒラギノ角ゴ Pro W3」がなければブラウザのデフォルトフォントである「МＳ Ｐゴシック」を適用してしまい、「メイリオ」を適用してくれないのです。

したがって、現在のところ、Windows版 Internet Explorer 6と7で「メイリオ」を最優先で適用するには、一番はじめに指定しておかなければならないのです。

@charset "UTF-8";

  /* reset styles */

  html, body, div, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, address,
 ul, ol, li, dl, dt, dd,
 table, th, td, form, fieldset {
   margin: 0;
   padding: 0;
   color: #222222;
   font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
 } 

次に、フォントサイズについて、ほとんどのブラウザのデフォルトは「16px」ですが、Mac OS版 Firefoxは「14px」となっています。Mac OS版 Firefoxでも「16px」で表示させるには、単位に固定値を利用するのが確実です。

ここで「アクセシビリティ的にどうか」と考えた人もいるでしょう。しかし、モダンブラウザのほとんどは、単位に固定値がつかわれていても、「可変」または「ズーム」できるのでまったく問題ありません。問題になるのは、Internet Explorer 6以前だけなのです。

したがって、すべてのブラウザに対して、body要素に「16px」を適用しておき、Internet Explorer 6以前では「medium」「1.0em」「100%」といった相対値が適用されるようにCSSハック（スターhtmlハック）で調整しておけばよいのです。

@charset "UTF-8";

  /* For body element */

  body {
   font-size: 16px;
 }
  * html body { 
  font-size: medium; /* IE 6 or sooner */
 } 

ページ 2 / 3

前のページ

次のページ