css

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

ブラウザの標準フォントを全部メイリオとかにするのが嫌で
個人的にはラテン文字は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なのかなぁ。


  1. ClearTypeでまともにレンダリングしてくれるフォント 

  2. IEにもあったはず、Chrome以外未確認。もちろんブラウザごとに表示のされ方は(ry 

Font Link的なのをCSSでやる

いい加減Syncに失敗してBookmarkの並びが崩れるのにイライラしてきたので、仕方なくChrome(というかChomePlus)を更新したらgdi++使えなくなった。
gdippとかMacTypeは細かいところが微妙だったので素直にClearTypeでメイリオ使うことにした。
そのままだといろいろ気にくわないし、こだわりもあるけど、もうできるだけ環境依存的なことは辞めたい。

◆ 基本は「Arial+Meiryo UI」1がいい
◆ Winのせいで糞フォントと化しているヒラギノは他のフォントに置き換えたい2

これがChromeのCustom.cssで実装できるそうなので3、じゃあそうしましょうって感じ。


  1. Meiryo UIとかメイリオの英字は何か気持ち悪いので嫌い 

  2. え、普通Winにはヒラギノ入ってないって!? 

  3. Google ChromeでMS PゴシックをArial+メイリオに置換する – Weblog – hail2u.net