ちょっと話題の記事

【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応

特集

野中 龍一

2013.03.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

みなさんこんにちは、高速化やSCSSの記事を書いている野中です。

前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。
今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。

前回作成した匠顔フォントはこちら

Creeperフォントをダウンロード

1，Webフォントについて

少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。
一部抜き出して紹介します。

1.1，Webフォントとは

CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォントを利用してデザインして場合、画像化するしかありません。

そこで、CSS3のWebフォントを使うことによって、画像を使わずにCSSによる装飾が可能になります。CSS3で利用できるようになるWebフォントは、インターネット上のサーバーにあるフォントをブラウザ上で利用できるようになります。

1.2，Webフォントの使い方

Internet Explorerも対象とし、安全にWebフォントを利用したい場合の定義方法「安全な@font-faceの書き方(抄訳)」を参考にします。

記述サンプル

@font-face {
	font-family: 'Graublau Web';
	src: url(GraublauWeb.eot);
	src: local('Graublau Web Regular'), local('Graublau Web'), url(GraublauWeb.otf) format('opentype');
}

1.3，Webフォントに必要な形式

クロスブラウザでWebフォントを利用するためには、最低2つの形式が必要です。
１つ目はInternet ExplorerのためにEOT（.eot）形式、２つ目はその他の主要ブラウザに対してTrueType（.ttf）かOpenType（.otf）形式を用意すれば、問題なさそうです。

iOS4.0のみ、TrueTypeもOpenTypeも対応しておらず、SVG Fontしか利用できません。現在iOSのバージョンは6.0ですし、このバージョンだけのために無理に対応する必要はないと思います。
今回はTrueTypeでフォントを作成しているのでIE用に必要なEOT形式はツールを使って変換します。

1.4，Webアイコンフォントのメリット

  • 画像を使わずにCSSで色やグラデーション、シャドウを使ってビヘイビアを制御できる
  • 拡大しても縮小しても美しい
  • 表示サイズが大きければ大きいほど画像よりもサイズが小さくなる

1.5，Webアイコンフォントの注意点

Webアイコンフォントのデメリットもあります。
それは、Webフォントはあくまで文字なので、文字とアイコンの意味が異なるということです。

ですから、文章としての意味づけができないので使い方に注意が必要です。

2，TTEditを使ってWebフォントを一発作成（1文字限定）

手軽に試すにはTTEditの機能を使うと楽に試すことができます。
前回作成したフォントをTTEditに読み込んでWebフォントに必要な形式をエクスポートしてみます。

2.1，エクスポート

ファイル > エクスポート > 一文字フォントを選択します。
保存するフォルダを選択してエクスポートします。

Webフォントの保存

エクスポートされたファイルを確認してみましょう。

エクスポートされたWebフォント

2.2，エクスポートされたHTMLを確認してみる

TTEditでエクスポートすると確認用のHTMLファイルまで作ってくれます。

確認用にエクスポートされたHTML

生成されたHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
@font-face {
  font-family: "myFont";
  src: url("creeper.eot?") format('eot'),
       url("creeper.woff") format('woff'),
       url("creeper.ttf")  format('truetype'),
       url("creeper.svg")  format('svg');
}
.myFontClass {
  font-family: "myFont";
}
</style>

<body>
<p>Webフォントの文字は「<span class="myFontClass"></span>」です。</p>
</body>
</html>

3，自分でCSSを書いて表示できるようにしてみる

上記のサンプルで表示されることはわかりましたが、実際にCSSを書いて試してみます。
以下にサンプルファイルと実際にWebにアップしたサンプルをチェックすることができます。

3.1，@font-faceでWebフォントを定義する

記事の最初で紹介した安全な@font-faceの記述方法で試してみます。

@font-face {
    font-family: 'Creeper';
    src: url('../font/creeper.eot');
    src: local('Creeper'), url('../font/creeper.ttf') format('truetype');
}

3.2，Compassを使って@font-faceを記述してみる

@font-faceの記述はそれほど難しいものではありませんが、compassを使うことでシンプルに記述することもできます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web font sample</title>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>

<p class="font">AAAAAAA</p>

<textarea class="font">
AAAAAAA
</textarea>
</body>
</html>

config.rb

コンフィグにフォントが入っているフォルダを指定しておきます。

http_path = "http://nonakaryuichi.github.com/web_font_sample"
css_dir = "css"
sass_dir = "scss"
font_dir = "font"
images_dir = "images"
output_style = :nested
line_comments = false

SCSS

CSSで記述するよりシンプルですね。

@import "compass";
@include font-face('Creeper', 'creeper.ttf', 'creeper.otf');

.font
{
	padding: 20px;
	width: 600px;

	font-family: 'Creeper';
	font-size: 130%;
	letter-spacing: 10px;
	line-height: 160%;
}

Output CSS

「安全にWebフォントを利用したい場合の定義方法」とは結構違います。

@font-face {
  font-family: "Creeper";
  src: url('/css/fonts/creeper.otf');
  src: url('/css/fonts/creeper.otf?#iefix') format('eot'), "creeper.ttf"; }

Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera. Compass Font Face

一応クロスブラウザをサポートしているようなのでちゃんと形式が用意されていれば問題にならないと思いますが、自分にはどれが正しいのかは判断が付きません。

3.3，IEの表示テスト

IE6のテスト環境がなかったのでIE7からテストしています。
インデントが変な部分がありますが、タブキーが入ってしまっただけなので大きな違いはありません。

ブラウザモード：IE7、ドキュメントモード；IE７

IE7テスト

ブラウザモード：IE8、ドキュメントモード；IE8

IE8テスト

ブラウザモード：IE9、ドキュメントモード；IE9

IE9テスト

問題なさそうですね。

4，Webツールを使った方法

簡単に形式を変換できるWebツールがいくつかあります。
上記のTTEditを利用した方法は1文字限定なので、複数の文字を用意している場合はツールを使ってTrueType形式を変換しましょう。

4.1，フォントの変換ツール

  • Free Online Font Converter
    pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bdfと非常に豊富な形式に変換可能なWebツールです。
  • ttf → eot
    TrueType形式をIE向けのEOT形式に変換できるWebツール
  • WEBFONT GENERATOR

4.2，Webアイコンフォントとジェネレーター

こちらのツールは本当に便利です。
作り方を知っていることも大事だと思いますが、正直なところ一からフォントを作るのはかなり手間ですからできればこれらのツールを使うのが良いと思います。

  • IcoMoon
    SVGでインポートできて種類も豊富。一番オススメ。
  • Font Awesome
    詳しくチェックしていませんが、たぶんすばらしいものです。
  • CONDENSE-iconFont
    梶原勇吾氏が提供しているアイコンフォント
  • Web Icon Fonts
    Kotaro CHIBA氏が提供しているアイコンフォント
  • font struct
    ドットを使ってフォントを作ることができる（要会員登録）

まとめ

いかがでしたでしょうか？
フォントの作り方は知識不足ですみません。もっと勉強します。

サンプルを見ていただくとわかりますが文字と同じ扱いなので色を変えたりCSS3でアニメーションやシャドウを付けることができます。
さらに拡大しても美しい。

もちろん画像の方が良いこともありますが、画像に頼らずに表現できるというのはすばらしいですね。
フォントを作るのは少し手間ですが身につけておきたいテクニックですね。

参考サイト

*