こんにちは。アウラスタッフのコーダーの仁木です。
アウラのデザイナーさんはデザインデータをくれる時はいつもPhotoshopでくれます。それを元にコーディングを進めていきます。
当たり前ですがデザインデータにはテキストが入っています。テキストは見出しや文章など使われる箇所によって様々にデザインされていますが、これをコーディングする時に見落としたり、プロパティが正しく設定出来ていなかったりするとブラウザに映したときにデザインデータ通りの見た目に出来ず、デザイナーさんが綺麗に整えたバランスが崩れてしまう要因になったりします。
今回はPhotoshopのデザインデータとCSSのフォント関連のプロパティのことについてまとめます。
Font-Familyを指定する時に気を付けたいのが、表示してほしいフォントがパソコンに入っていなかった時に代替として表示するためにフォントの指定は必ずいくつかのフォントを指定しましょう。
ゴシック体はゴシック体系の代替フォント、明朝体は明朝体系の代替フォントを指定してあげると良いです。
僕の場合、フォントファミリの指定にはよく下のようにしています。
font-family: “Meiryo”, “Hiragino Kaku Gothic Pro”, “Yu Gothic”, Verdana, Geneva, sans-serif;
font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN”, “Hiragino Mincho Pro”, “ＭＳ 明朝”, serif;
後述してある、プロポーショナルメトリクスを使用できるのでメインのゴシック体は游ゴシック体でも良いかもしれませんね。
アウラではメイリオがメジャーなので現在はメイリオをメインで使う指定にしています。
文字サイズはPhotoshopのフォントサイズです。単位の指定には”rem”、もしくは”em”をよく使います。remはIE8は対応していないので『rem.min.js』など、ポリフィルのスクリプトを読み込んでおきましょう。
Photoshopの行送りの値からLine-Heightの値を出すための計算は
CSSの値に入れる時は単位は指定しない方が良いでしょう。
Photoshopのトラッキングの値からLetter-Spacingの値を出すための計算は
文字の太さは100~900まで指定はできますが、ブラウザではノーマルとボールドしか設定されていないことが多いです。700以上は全てBoldの指定と同様に、以下はNormalと同様に表示されます。
なので、指定は「normal」か「bold」で良いでしょう。
斜めの文字は「italic（イタリック体）」、「oblique（斜体）」で指定します。イタリック体と斜体どちらも用意されていないフォントはobliqueを指定すると文字を斜めに倒す処理をします。
下線はリンクによく使いますね。それぞれ「underline」、「line-through」を指定します。
１行目の文字の始まりをずらすときに使います。
応用としてリストっぽく見せたい場合には
としてあげると２行目以降がずれてくれます。
ICSさんの記事を参照させていただきました。ここのより詳しい内容はリンク先で読むことが出来ます。
OpenTypeフォント（OTF）にはフォントの字間情報を制御する「プロポーショナルメトリクス」という機能がつけられているものがあります。
この機能を使って自動で適切な文字間にしてくれます。このプロパティはIE9以下は対応していませんが、ほとんどのメジャーなブラウザは対応しています。
有名なフォントでは「ヒラギノ角ゴシック体」、「ヒラギノ明朝体」、「游ゴシック体」、「游明朝体」、「Noto Sans CJK JP」で使用できます。メイリオはプロポーショナルメトリクスの機能がつけられていないので残念ながら使えません。
一部のブラウザで不具合があるようです、
和風なデザインでよく見かける縦書きはこのように指定すると良いようです。クロスブラウザに対応するためにプレフィックスも書いています。
だいたい僕が使うものはこんなくらいです。
フォントファミリなんかで、どうしてもこのフォントが使いたいけれど画像じゃない方がいいなぁっていうときはフォントを読み込んで使ったりしていますが、そういう時のフォントの読み込みもまた記事にしてみようかなと思います。
