Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What is going on with this article?
@jkr_2255

Web Fontの各種テクニック

More than 3 years have passed since last update.

HTML5 Advent Calendarと言いつつ、中身はCSS3なのですが、そのあたりはご了解いただければと思います。

Web Fontとは

ご存じの方も多いかもしれませんが、Web Fontとは、「端末側に入っていないフォントをWeb経由で取得して表示できる」仕組みのことです。Qiitaでも、アイコンフォントが使われています。

メリット

  • 文字として使える…凝った文字を出すときに画像化すると、文字でなくなってしまうので再利用に不便ですが、文字ならそのまま読み取れますし、動的に書き換えるのもごくシンプルに済みます。アクセシビリティやSEOの面でも有利です。
  • ベクター表示…Web Fontには通常アウトラインフォントを使いますので、拡大してもスムーズです。Retinaなど高解像度化が進む環境では、かなり便利です。
  • 表現の自由度・安定性…端末に入っているフォントに依存する形では、見る環境によって表示が変わってきますが、Web Fontで用意すればどこから見ても同じように見えるものを作れます。

デメリット

  • 重い…アイコンフォントだったらロードまでアイコンが見えない程度なのですが、何の細工もせずに本文のフォントをWeb Fontにしてしまうと、フォントがロードされるまで文字が出ないことになってしまいます1。特に、日本語の場合フォントファイルも巨大なので、影響もかなり大きいです。
  • ライセンス…Web Fontとしてフォントを使うことはすなわち、「そのフォントを配布する」ことになるので、再配布可能なフォントを使うか、相応の契約を結ぶ必要があります。「きれいだから」と、たとえばヒラギノをWeb Fontにする、なんてことは技術的にもライセンス的にも面倒です。
  • 日本語向けサービスの未発達…上に述べた重さやライセンスの問題などで、日本語Web Fontを簡単に試せるようなサービスはあまりありません。欧文だけならGoogle Fontsなどで簡単に使えるようなフォントが各種存在しています。

ファイル形式について

Qiitaでも使われているアイコンフォントのFont Awesomeを見てみると、フォントファイルばかり5つも付いています。中身はすべて同じもので形式が違うだけなのですが、それを見ただけで「自分で用意するのは面倒」と腰が引けてしまうかもしれません。

ただ、実はWeb Font専用の形式にしなくても、ふつうのTrutType/OpenTypeフォント(.ttf/.otf)ファイルで、ほとんどのブラウザに対応できます(Can I use)。IE 8以前に対応するにはEOT形式が必要ですが、この2つがあれば、ほぼすべての環境に対応可能です(iOS 4ではSVGフォントしか対応していない、なんてのもあったようですが、現実問題としてそんな端末を現時点で考慮する必要は限りなく0に近いでしょう)。

なお、形式によっては最初から圧縮されていて、ファイルサイズが小さくなっているものもありますが、TTFでもgzip転送すればほぼ同じぐらいの容量になるので、それで充分な気もします。

セキュリティ上の問題

同じサーバにフォントを置く上では特に問題はないのですが、Google ChromeやFirefoxから別サーバのフォントをダウンロードしようとすると、CORSのチェックが行われて、Access-Control-Allow-Origin:ヘッダで許可されていない場合、フォントを使うことができません。

とりわけ、AWSを使う場合、静的ファイルはS3に置くことが多いので、引っかかることがよくあるかもしれません。S3の場合の設定はクラスメソッドさんのページに詳しいです。

CSSへの書き方

既存のサービスからフォントを借りてくるのも1つの手段ですが、自分でCSSを書けばさらに制御できます。

基本編

フォントの設定には、CSSの@font-faceを使います。

大まかなひな形
@font-face{
  font-family: 'Font Name';
  src: url('http://example.com/path/to/font.ttf');
}

font-familyの名前はあとで参照するときに使うだけなので、好きに付けられます。srcには他のリソース同様、url()でファイルを指定します。あとは、他の場所からCSSでfont-family: 'Font Name'として、このフォントを使えます。

応用編

ウェイトの使い分け

同じfont-familyについて、通常時とboldにした場合のフォントを切り替えることができます。

ウェイトの使い分け
@font-face{
  font-family: 'Font Name';
  src: url('http://example.com/path/to/font-regular.ttf');
  font-weight:normal;
}

@font-face{
  font-family: 'Font Name';
  src: url('http://example.com/path/to/font-bold.ttf');
  font-weight: bold;
}

このように、同じfont-familyで指定することで、標準と太字をまとめて指定でき、font-weightで切り替え可能になります。Webでやる意味があるかはわかりませんが、出版物のように「本文は明朝、強調はゴシック」のような別フォントの指定や、100〜900まで9段階のウェイト指定も、したければ可能です。

ローカルフォントの使用

@font-facesrcには、複数のフォントファイルを指定できますが、local('フォント名')という指定を混ぜることもできます。これは、

  • Helveticaなど有名だけど有償なのでWeb Fontとして使えないフォントについて、環境にあればそっちを使って、なければフリーフォントをWeb Font化して代用
  • IPAフォントのようにそこそこ有名なフォントを使うので、環境にあればダウンロードをさせずに表示させる

などの場面に有用です。


  1. PHPの公式サイトでも、この「文字の表示遅れ」を体感できてしまいます。 

41
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
41
Help us understand the problem. What is going on with this article?