Skip to content

Font Link的なのをCSSでやる、その後

Posted by admin  2013-11-19 08:13 am

ブラウザの標準フォントを全部メイリオとかにするのが嫌で
個人的にはラテン文字はArialとかTimesとかの標準的なフォントにして、
日本語部分をメイリオだとか游明朝あたり[1]で補完するのが好み。

ユーザースタイルシートを使えばほとんどのブラウザ[2]でこれが実装できる

Font Link的なのをCSSでやる
http://y-log.net/archives/2012/10/02/2350

しかし、Google Chrome 31 (30?) からCSSの仕様が変わった?ようで、
アップデート後から上記の方法だと思うように反映されない。
font-faceでunicode-rangeを指定すると
非指定の部分の指定が反映されずに強制的にMSゴシックになる。

試行錯誤の結果、一応の対処方法を見つけた。

@font-face {
  font-family: 'Meiryo UI';
  src: local('Arial');
  unicode-range: U+0000-007F; /* ラテン文字はArial */
}
@font-face {
  font-family: 'Meiryo UI';
  src: local('Meiryo UI');
  unicode-range: U+007F-FFFF; /* その他はMeiryo UI */
}

font-familyのまま置換しないところのunicode-rangeについても
きちんと明記してやれば反映されるようで。
最新のCSS動向とかよく知らないんだけど、これがvaildなのかなぁ。

以下、今回のまとめ。

Google Chromeの設定
image

Custom.css

@charset "UTF-8";

/* default */
@font-face {
  font-family: 'Meiryo UI';
  src: local('Arial');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: 'Meiryo UI';
  src: local('Meiryo UI');
  unicode-range: U+007F-FFFF;
}

/* sans-serif */
@font-face {
  font-family: sans-serif;
  src: local('Arial');
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: sans-serif;
  src: local("メイリオ");
  unicode-range: U+007F-FFFF;
}

/* serif */
@font-face {
  font-family: serif;
  src: local('Times New Roman');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: serif;
  src: local("游明朝");
  unicode-range: U+007F-FFFF;
}

/* monospace */
@font-face {
  font-family: monospace;
  src: local('Courier New');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: monospace;
  src: local('MeiryoKe_Gothic');
  unicode-range: U+007F-FFFF;
}

/* cursive */
@font-face {
  font-family: cursive;
  src: local('Comic Sans MS');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: cursive;
  src: local("メイリオ");
  unicode-range: U+007F-FFFF;
}

/* fantasy */
@font-face {
  font-family: fantasy;
  src: local('Gabriola');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: fantasy;
  src: local("游明朝 Light");
  unicode-range: U+007F-FFFF;
}
  1. ClearTypeでまともにレンダリングしてくれるフォント []
  2. IEにもあったはず、Chrome以外未確認。もちろんブラウザごとに表示のされ方は(ry []

From → PC

次の記事前の記事関連記事

この記事へのコメントは終了しました。