CSSでフォントのスタイルを設定する際に一般的なプロパティは「font-style,font-variant,font-weight,font-size,line-height,font-family」などがあります。それぞれ値を指定することが可能ですが、今回はフォントの種類を指定するfont-familyについて見ていきます。
1.基本的な文字のフォント指定方法
フォントの種類を指定する場合は以下のように記述します。
|
1 2 3 |
指定する要素 { font-family: 値1,値2,値3; } |
[値]とはフォントの種類を指します。複数指定する場合は、カンマ「,」で区切り日本語フォントの場合は、「”ＭＳ Ｐゴシック”」などのように「”」ダブルクォーテーションで括ります。記述する順番が前のフォントほど優先して適用されます。
2.WEBフォントを使ってみよう
そもそもWEBフォントとは、CSS3で導入された新しい技術で、ユーザーの端末にインストールされているフォントだけでなく、WEBサーバー上に存在するフォントをダウンロードして適用することができるという技術を言います。
その中でも広く利用されているのが「Google Web Fonts」になります。
【使い方】
2-1.フォントを選んでコードを取得する
「Quick-use」をクリックするとソースを取得することができるので以下の2行をコピーします。
[3]
|
1 |
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> |
[4]
|
1 |
font-family: 'Oswald', sans-serif; |
2-2.HTML内に取得したコードを読み込む
上で取得したコードを<head>内で読み込みます。
|
1 2 3 4 5 6 |
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> <style type='text/css'> #WebfontSample { font-family: 'Oswald', sans-serif; } </style> |
3.確認
サンプル内の「WEBフォントを使ってみた。」というテキストを確認してみてください。欧文に関してはきちんと適用されていますが、そもそも日本語フォントではないため少しバランスが悪くなってしまっています。このように、英語と日本語が混ざり合う文章については自然なフォント選びが難しいかと思いますが、英語表記のみの要素などでは違和感なく表示されますので取り入れていくのもいいと思います。