「font-familyプロパティ」CSSで書体(フォント)を指定する

Webページにおいて、フォントの選択は非常に大切です。フォントによってサイト全体の雰囲気が決まりますし、読みやすさにも関わる部分となります。柔らかい印象の文章になったり、クールな印象となったり、フォント一つで印象は大きく変わるわけです。

また、WindowsとMacでは、インストールされているフォントが異なるため、それらも考慮して決める必要があります。なので、数多くのフォントの中から、自分のサイトに合ったものを見つけるようにしましょう。

ここでは、CSSでフォントを指定する方法を紹介します。

 

書体(フォント)を指定する(font-family)

CSSでフォントを指定するには、「font-familyプロパティ」を使用します。そして、{font-family: “ヒラギノ角ゴ Pro W3” ;}のように、フォント名を値として記述します。また、フォントが表示されない環境のために、複数のフォントを記述するのが一般的です。

ちなみに、Dreamweaverでは、以下のような指定が用意されています。

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;


font-family: “MS P明朝”, “MS PMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, serif;

先述したように、WindowsとMacでインストールされているフォントが異なります。なので、複数のフォントを記述しておいて、色々なデバイスに対応できるようにする必要があるわけです。

 

Webフォントも使用できる

基本的に、フォントはコンピュータにインストールされているものしか表示できません。しかし、「Webフォント」を利用すれば、インストールされていないフォントでも表示できるようになります。

Webフォントとは、CSS3から新しく導入された概念で、Web上のサーバーからフォントを参照して表示できます。だから、そのコンピュータにインストールされていなくても、フォントが表示できるわけです。

英語だと「Google Web Fonts」で無料で利用できますし、日本語でも色々なサービスが提供されています。日本語だと有料のサービスも多いですが、個性的なフォントを利用できるのでメリットが高いです。

なので、周りと差別化をしたいなら、Webフォントを使ってみても良いかもしれません。

 

以上、CSSでフォントを指定する方法を紹介しました。テキスト主体のサイトだとフォントは重要ですから、しっかりと考えて指定をするようにしてください。読みやすいサイトを作成するためには、必要不可欠なことです。

サブコンテンツ

このページの先頭へ