文字だけでデザインが変わる!?
WEBフォントを使ってみよう!

top

 

こんにちは!のんです!!

サイトによってフォントが違う時がありますよね。

そこで今日は、サイトのフォントの設定の仕方をご紹介します!

 


フォントを設定しよう!!


 

フォントを設定するときは、CSSで『font-family』を使用します。

 

ゴシック体で表示したいときは

明朝体で表示したいときは

とCSSのbody の部分に設定するとフォントが変更されます。

 

【実行結果】

ゴシック体

%e3%82%b4%e3%82%b7%e3%83%83%e3%82%af

 

明朝体

%e6%98%8e%e6%9c%9d%e4%bd%93

 

WEB フォントを利用しよう!

 


WEBフォントとは??


 

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、

Webブラウザなどの可視化(レンダリング)をともなうクライアントが文字表示を行うシステムおよびそのフォントである。

引用:Wikipediaより引用

 

つまり、サイト上の画像などと同じようにフォントデータをサイトが持っているため、

パソコンに入っていないフォントなどもサイト上で表示できるということ!!

 


WEBフォントを設定しよう!


 

WEBフォントも『font-family』で設定はしますが、

追加で『@font-face』も設定しなければなりません。

 

『@font-face』は、フォントファイル名とフォントファイルパスを指定するものです!

 

 

src:url でフォントファイルデータがある場所を指示し、

WEBフォントを指定したいところにCSS を適用させます!

 

 

りてがき筆(フリーフォント:http://www.kcc.zaq.ne.jp/in-mlg/freefont/riitf/)で実践してみます!

 

今回は、メニューバーのみ変更してみます!

 

【設定前】

 

%e5%a4%89%e6%9b%b4%e5%89%8d

【設定後】

 

%e5%a4%89%e6%9b%b4%e5%be%8c

 

 

簡単に変えることができました!

 

フォントを変えるだけでデザインが変わったように見えますし、

サイトをイメージに近づけやすくなります!

文字のデザインも重要ですね!!


The following two tabs change content below.
のん

のん

2015年入社 コバーン討伐会員No.0001