スタイルシートデザインガイド
スタイルシートでできるデザインを紹介しています。
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
グラフィックを使用せずに見出し文字を表現する
font-familyはフォントを種類を指定するプロパティで、フォント名、またはフォントの種類を表すキーワードでフォントを表示するのが通例ですが、実際の表示はユーザー環境に依存します。ですから同じＯＳ上であってもブラウザによって表示されるフォントは統一されていません。
そこでフォント名で指定すると、ＯＳにインストールされているフォントであればどのブラウザでも指定されたフォントで表示されます。どのＯＳにもインストールされている共通フォントは限られていますが、その中からもっともイメージにあうフォントをしていすれば、グラフィックを使用せずに見出しをデザインすることができます。
ただしfontプロパティで「bold」に設定してあったり<h1>タグなどの見出しタグにフォント指定が解除されてしまうので注意が必要です。また、フォント名は複数指定できるので、保険として最後に一般的なフォント名も指定しておきましょう。
デザインサンプル
Stylesheet Designguide
Stylesheet Designguide
Stylesheet Designguide
サンプルCSSコード
p.line01 {font-family: "Lucida Handwriting"; font-size: 20px; }
p.line02 {font-family: "impact"; font-size: 20px; }
p.line03 {font-family: "Arial Black"; font-size: 20px; }
p.line02 {font-family: "impact"; font-size: 20px; }
p.line03 {font-family: "Arial Black"; font-size: 20px; }
