stystk

cssでHelvetica Neue Lightを使うときのメモと、いろいろやってて気付いたこと。

まぁまず使う時の書き方。

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;

これ以外の書き方だとうまくいかなかった。font-familyの”Helvetica Neue”を取るとFirefoxだとダメで、”Helvetica Neue Light”を取るとOperaがダメ。font-weight:lighter;だとSafariでの表示がLightにならなかった。
と、各ブラウザで動作がバラバラになってて、結局上の書き方でなんとかうまくいった。でも、上の書き方でHelvetica Neue UltraLightを使おうとするとFirefoxだけダメだった（font weightは100ね）。これはFirefoxのバグなのかなぁ…。

気付いたこと（間違ってたら叱ってください）

• Firefoxはフォントのファミリーネームにしか対応していない
• SafariとOperaはフォントのフルネームも対応してる
• Operaはfont-familyをフルネームで指定されたとき、font-weightを無視する
• Safari(4は)はfont-familyをフルネームで指定されていても、font-weightが機能する
• OperaもSafariもfont-familyをファミリーネームで指定すると、レギュラー以下のweightにできない

というような感じ。検証ブラウザのバージョンが全部Beta版（Firefox3.1b2, Safari4Beta, Opera10a）なんであてにならないかも。

追記:
Safari3だとPostScriptネームで指定しなきゃダメだったので修正。で、Safari3はfont-weight無視するわ。無視じゃなかった。指定したスタイルよりも細いのだと無視されて、太いのだとOKだった。なにそれ…。
だから、font-family:”HelveticaNeue-Bold”;とかやっちゃうとweight変えられないけど、HelveticaNeue-UltraLightを指定しとくとweight変更可能。違った。UltraLight指定でもLight指定でもBoldにはできるってだけだった。UltraLight指定でLightとかRegularとかにはできない。
PostScriptネーム指定の動きはSafari3も4も同じっぽい。

PostScriptネームでfont-family指定できるのはSafariだけっぽい。cssはフルネームを先に書いた方がいいかも。

Safari…。

Firefox3.0.6とOpera9はBeta/Alphaと同じっぽい。

結論: これはめんどい。IEとかChromeとかの検証してないし…。windowsってdfontファイルに対応してたっけ？

ブラウザのフォント周りの処理って結構バラバラ。font-sizeなんか、Mac版のFirefoxのみ小数点以下のサイズ表示可能とかだし。letter-spacingもね。emとか%で組んでると結構差が出てきていつも困る。

[参考: Pixelmatrix Design - Advanced Web Typography, Helvetica Neue Light – Guillermo Esteves]

追記2:
Chromeで確認（というかHelvetica Neue入ってないから意味ないんだけど）したら、ブラウザの標準フォントで表示された（MSPゴシックかな。ClearType効いてなかったし）。Chromeはこういう状況（font-familyに指定したフォントがない場合）だと親要素からfont-familyが継承されないのかな。なので、またちょっと修正。

追記3:
Firefox3.1b3でHelvetica Neue Lightにitalicをかけると、UltraLightのitalicが表示される。Firefox3.0.7ではちゃんとLightのitalicが表示されるので、3.1b3のバグかなぁ。3.5が出る時には直ってるといいなぁ(3.6a1preでは修正されてる)(3.5b4で修正された)。

追記4:
Mac版のGoogle Chrome(自前ビルド版(090407))でも上記の書き方でOKだった。WebkitだからSafariと同じような動きなのかな。