フォントの基礎

web

フォントとはWebサイト等に表示する文字の形式の事です。 文字の大きさ・太さ・形などに特徴があり、中には絵にしかみえないようなフォントもあります。

フォントの分類と効果

CSSではフォントを「generic family」で5種類に区分しています。

sans-serif

ゴシック体系でひげ無しです。
モニタで読みやすいとされています。

serif

明朝体系でひげ付きです。
印刷物で読みやすいとされています。

monospace

固定幅です。
文章体で読みやすいとされています。

fantasy

装飾体や絵文字です。
女子は親しみを感じやすいかもしれません。

cursive

手書き体風です。
砕けた印象を与えるので、サイトの敷居を下げるのにいいかもしれません。

フォントの指定方法

通常のフォント指定

ウェブサイトのフォントは、CSSのfont-familyで指定します。 小まめにフォントを変える事は基本的にしないので、html要素に指定するのが一般的です。

要素{font-family:"フォント名";}

なおフォントを指定しない場合やクライアントPCに指定フォントがインストールされていない場合は、閲覧ブラウザの標準フォントで表示されます。

フォントを複数指定することも可能です。 基本的に左端のフォントが適用されますが、クライアント側に左端のフォントがインストールされていない場合は一つ右のフォントが適用されます。

要素{font-family:"フォント1","フォント2";}
要素{font-family:"フォント1","フォント2","フォント3";}

CSSではfont-familyの右端には一般フォントを指定する事を推奨しています。そうしておけば想定外のフォントで表示されることはほぼなくなる訳です。

ウェブフォントの指定

特殊なフォントはクライアントマシンにインストールされていない可能性が高く、通常のフォント指定では表示されない可能性が高いです。しかし「@font-face」を定義してサーバ上にフォントファイルを置けば、特殊フォントでも使用できます。

@font-face{
  font-family : "フォント名";
  src : url("フォントファイルのURL");
}

要素{font-family : "フォント名";}

使用に際しては注意事項があります。
まず使用の度に負荷がかかるし参照先が変更されると使えなくなるので、フォントを格納するサーバが必要になります。 またフォントのライセンス次第では使用できないこともあるので、利用規約をよく読んでから採用しましょう。

またウェブフォントをインターネット上で公開しているサービスもあります。 そのフォントを使う場合は自分でフォントファイルをアップロードしなくてもいいので大分楽ですね。

アマルウェブ HOME