Post Type: photoPost Date: 2011/10/16
iOS5になってiPhoneにもヒラギノ明朝が入った(iPadには以前から入ってた)。で、iOSのSafariだと「font-family: Georgia, serif;」で日本語部分にヒラギノ明朝が使われないのでCSS修正した。出た。
iOS5になってiPhoneにもヒラギノ明朝が入った(iPadには以前から入ってた)。で、iOSのSafariだと「font-family: Georgia, serif;」で日本語部分にヒラギノ明朝が使われないのでCSS修正した。出た。
前のPostで書いたCSSのフォントのなんぞをちょっとアレしたやつを書く。ブラウザによって表示が異なるアレね。
http://stystk.com/test/chrome-safari-font.html
まぁ↑のdemoにある通りなんだけど、SafariとChromeでフォント表示が違う。
FirefoxとChromeはWin/Mac共に上が明朝で下がゴシック体表示になった。Mac版Safariは上がゴシック体で下が明朝体。Win版Safariは上下共ゴシック体。OperaはWin/Mac共に上下とも明朝体。IE8は上下ともゴシック体。IE9は互換モードだと上下ともゴシック体、標準モードだと上明朝体で下ゴシック体。(thx @sabotenbrother)
GoogleWebFontsのVollkornを読み込んでる。上のが{font-family:Vollkorn,serif;}、下のが{font-family:Georgia,sans-serif;}。
Mac版SafariはWebFontsを使った場合(上の場合)、そのフォント内にない文字(この場合和文)を表示する場合はserif指定とか無視して、ヒラギノが強制的に使われるのかな。で、Mac版SafariはGeorgiaを指定している場合の和文は、sans-serif指定を無視してヒラギノ明朝が強制的に使われるようになってるのかな。
あとでもうちょっと調べてみようと思う。→とりあえずザーっといろんなブラウザでチェックした。あとはCSSの仕様とかか…面倒くさいな…というか仕様にあるのかな…チェックした限り、割とバラバラだし…
なんとなく、FirefoxとChromeの表示が正しいような気はしてる。
正しさとは何かね。君の言う正しさとは。
実例: Twitterのtweet表示のページとか、 http://hail2u.net/404.html とか。
WebKit.app(r86072)でこんなんでた。
ボリューム”1TB”ってのはシステム入ってるボリュームではなく、外付けUSBHDD。以前とっておいたWindowsVistaのバックアップ内にあるフォントを参照してる。上記のやつ以外に他のフォントの場合も同じようなのが出た。許可しないを選択するともうこれ出てこなくなるくさい。試しに許可してみればよかったな。
しかし、WebKit.app(Safari)はインストールしてないフォントもこういうふうに使えるようになんのかな。なんか怖いな。
まぁ詳細不明。前からあったりすんのかなこれ。
さっきいつものようにSafariでYahooニュースかなんかの記事を読んだ時に強烈な違和感があって、何かと思えば、MSPゴシックで表示されていた。まぁWindowsであれば当たり前なんだろうけど、Macなのに表示されてた。インストールした覚えもないし、FontBookでインストールされているフォント一覧をみても見当たらない。
まぁ気になったので、いろいろといじってるとわかったんだけど、MSゴシック・MSPゴシック・メイリオあたりが表示された。もしかしたら明朝も使えたかもしれない。Safari以外のブラウザだとそのMS製フォントは表示されなかった。SafariとWebKit.appのみで表示された。
昨日Mac OS Xのフォントアップデートをしたばかりなので、まぁそのそれかなぁと思ってアップデータの中みたらATS.frameworkのファイルが更新されてたので、またそのframeworkの中見たらFontInfoってフォルダの中になんかそれっぽい感じなんだけどなんか違う感じのファイルがあった。ファイル変更日も最近のものじゃない。このファイル自体もなんかわからん。全体的によくわからん。
で、またSafariでいろいろ試してたら、MSPゴシックで表示されなくなってて、何じゃそら…ってなったけど、依然メイリオは表示される。MSなんとか達は一体どこにいったんだ…チーズはどこへ消えたんだ…。
もしかして、メイリオは以前から表示されてたりしたのかもしれないけど、ぼくuser.cssでヒラギノに置き換えるようにしてたからわからん。もういろいろわからないの。こういうときどんな顔をすればいいかわからないの。
もう何が何だかよくわからない。ぼくはなにか夢を見ていたのかもしれない。狐につままれた的なサムシングで毎日がエブリデイかもしれない。
@font-face{
font-family:"Osaka";
src:local("Hiragino Kaku Gothic ProN W3"), local("Hiragino Kaku Gothic ProN");
}
@font-face{
font-family:"Arial Unicode MS";
src:local("Hiragino Kaku Gothic ProN W3"), local("Hiragino Kaku Gothic ProN");
}
割とブログなんか見てたりするとCSSのfont-familyにOsakaが指定されてて、うわー…ってなることがあるんだけど、ぼくはユーザースタイルシートに上のやつ入れてる。これでOsakaとはオサラバ。あと、Arial Unicode MSはなんか日本語の字体がおかしいんだよね(Macだけかな)、だからこれも。

起動時のこの文章のみフォントレンダリングが違うような気がする。その他は相変わらずのClearType。
ちょっと面白いの発見したのでメモ。
Google Chromeでcssにtext-shadowを使うとフォントがアウトライン表示される。text-shadow:0
Page 1/2