0

WEBフォントを使ってちょっとお洒落に…

WEBフォントを使ってサイトにちょっとお洒落に…

CSSでフォントのスタイルを設定する際に一般的なプロパティは「font-style,font-variant,font-weight,font-size,line-height,font-family」などがあります。それぞれ値を指定することが可能ですが、今回はフォントの種類を指定するfont-familyについて見ていきます。

 

 

1.基本的な文字のフォント指定方法

フォントの種類を指定する場合は以下のように記述します。

 [値]とはフォントの種類を指します。複数指定する場合は、カンマ「,」で区切り日本語フォントの場合は、「”MS Pゴシック”」などのように「”」ダブルクォーテーションで括ります。記述する順番が前のフォントほど優先して適用されます。

 

2.WEBフォントを使ってみよう

そもそもWEBフォントとは、CSS3で導入された新しい技術で、ユーザーの端末にインストールされているフォントだけでなく、WEBサーバー上に存在するフォントをダウンロードして適用することができるという技術を言います。

その中でも広く利用されているのが「Google Web Fonts」になります。

 

【使い方】

2-1.フォントを選んでコードを取得する

webfont1

 

Quick-use」をクリックするとソースを取得することができるので以下の2行をコピーします。

 

webfont2

[3]

 [4]

 

2-2.HTML内に取得したコードを読み込む

上で取得したコードを<head>内で読み込みます。

 

3.確認

webfont3

DEMO

 

サンプル内の「WEBフォントを使ってみた。」というテキストを確認してみてください。欧文に関してはきちんと適用されていますが、そもそも日本語フォントではないため少しバランスが悪くなってしまっています。このように、英語と日本語が混ざり合う文章については自然なフォント選びが難しいかと思いますが、英語表記のみの要素などでは違和感なく表示されますので取り入れていくのもいいと思います。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > WEBフォントを使ってちょっとお洒落に…