ホーム >  HTML・CSS >  Webフォントを使う


Posted:2015/03/10 9:00:36 AM|Category : HTML・CSS

Webフォントを使う

フォント次第でサイトの印象は思った以上に変わります。 従来Webサイトで表示されるフォントは、ユーザーの利用環境に依存していました。そこで、CSS3で登場した「@font-face」を利用します。

未対応のIEでも好きなフォントでタイポグラフィを表示できます。

完成イメージ

デフォルトで表示されるフォントです。

css0004

目的のフォントで表示することができます。

css0003

Webフォントを利用するまでの流れ

Webフォントは、以下のような流れで利用します。

①フォントファイル(TTFやOTFファイル)を準備。

②フォントファイルをサーバーへアップロード。

③スタイルシートで読み込む。

ブラウザで表示可能な形式一覧

まず、各ブラウザで表示可能なフォント形式をチェックします。一般的に、パソコンにインストールされているフォントは「TTF」「OTF」形式です。

しかし、旧IEではEOT形式でなければ表示できません。モダンブラウザでは、WOFFという見慣れない形式です。少し古いiPhoneなどで使われているiOSでは、SVG形式でなければ表示できません。

一つのフォントでは、全てのブラウザをカバーしきれないのが現状です。

ブラウザ・OS 表示可能フォント形式
Chrome TTF、OTF、WOFF、SVG
FireFox TTF、OTF、WOFF
safari TTF、OTF、WOFF、SVG
Opera TTF、OTF、WOFF、SVG
IE6/7/8 EOT
IE9 EOT、WOFF
iOS4.0 SVG
iOS4.2 TTF、OTF、SVG
Android TTF、OTF

Webフォント作成

Webフォントを各ブラウザへ対応させるため、複数の形式のファイルを用意します。「TTF」を「OTF」や「SVG」に変換します。変換するためには、「@FONT-FACE GENERATOR」というサービスを利用します。

①「@FONT-FACE GENERATOR」を開きます。

@FONT-FACE GENERATOR
②「UPLOAD FONTS」ボタンをクリックし、フォントファイルを選択します。

css0000

③「BASIC」「OPTIMAL」「EXPERT」の3つのメニューがあります。
「OPTIMAL」が推奨されているため、これを選択します。

css0001

④「Agreement」にチェックを入れると「Download」ボタンが出現します。
ファイルをダウンロードします。

css0002png

⑤ダウンロードしたZipファイルを解凍します。

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。作成したsvgなどのWebフォントファイルを、fontフォルダに配置します。

※wordpress基準ですが、wordpressでなくても作成できます。

  • sample/
  • index.php
  • style.css
  • fonts/
  • lobster_1.4-webfont.eot
  • lobster_1.4-webfont.woff
  • lobster_1.4-webfont.ttf
  • lobster_1.4-webfont.svg

コード

style.css

@font-face {
    font-family: 'lobster_1.4regular';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lobster_1.4-webfont.woff') format('woff'),
         url('../fonts/lobster_1.4-webfont.ttf') format('truetype'),
         url('../fonts/lobster_1.4-webfont.svg#lobster_1.4regular') format('svg');
}

h1.webfont {
         text-shadow: 0 1px 1px rgba(255, 255, 255 8);
         font-family: 'lobster_1.4regular';
         font-size: 180%;
}

index.php

<h1 id='webfont'>タイトル</h1>

解説

style.css

フォント名
@font-face {
    font-family: 'lobster_1.4regular';
    font-weight: normal;
    font-style: normal;

フォント名「’lobster_1.4regular’」を記述します。

フォントファイルへのパス
    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lobster_1.4-webfont.woff') format('woff'),
         url('../fonts/lobster_1.4-webfont.ttf') format('truetype'),
         url('../fonts/lobster_1.4-webfont.svg#lobster_1.4regular') format('svg');
}

各フォントファイルへのパスを記述します。「font」フォルダを参照するため、「../font」と書きます。ファイルは、上に記述したファイルが優先されます。

例)Firefoxの場合、表示可能な形式は、TTF、OTF、WOFFです。一番上の記述がWOFFであるため、WOFFを優先します。

    src: url('../fonts/lobster_1.4-webfont.eot');

.eotファイルへのパスです。IE用の記述で、IE9の互換モードに向けたものです。IE9互換モードは.woffを使えないためこの記述があります。

    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('embedded-opentype'),

.eotのあとに「?」があり、format(‘embedded-opentype’)と続いています。IE8以下では、「?」以降の記述をクエリ文字列として扱い、実際にはそれ以降を無視します。つまり、.eotファイルが使用されます。

IE9で.woffを読み込むには?

    src: url('../fonts/lobster_1.4-webfont.eot');
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('embedded-opentype'),

    /*src: url('../fonts/lobster_1.4-webfont.eot');*/
    src: url('../fonts/lobster_1.4-webfont.eot?#iefix')format('eot'),

IE以外のブラウザでは、format(‘woff’)のように、ファイルフォーマットを指定する必要があります。IE8以下の場合は記述しません。

上記の「format(‘embedded-opentype’)」のままでは、IE9でも.eotが読み込まれます。そこで、「format(‘embedded-opentype’)」をわざと正しくない表記の「format(‘eot’)」にします。すると、IE9で開いたとき、.woffが読み込まれるようになります。

※「format(‘embedded-opentype’)」をわざと間違った記述にする方法はよく用いられます。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告