[&] WDE-Express Vol.10 - Web Fonts

WDE-Express Vol.10 ウェブフォントの未来。
W3C CSS WG のジョン・ダゲット氏(Mozilla Japan) の講演。

[感想]
Web Fonts には未来があることを強く感じられた。
日本語 3000文字で、99.9% の文章をカバーできる、
その他の多数の文字は、フォント合成で文字の雰囲気は保てる。
となると、フォントデザイナーのヒンティングのテクニックを
プログラムで実装したり、何か解決策があるはずだ。
nexus one をはじめ携帯端末で使うフォントをもっと美しいものに。
皆の英知と、フォントデザインセンスと、
文字作りのノウハウ、文字組の達人技を集結できるといいな。
（KDDI Android IS01, customfont.ttf って名前でフォントを追加できる！）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

今年の WDE は HTML5, Mobile, CSS3, Social Media にフォーカスして開催予定。
11/13,14,15,16, 4日間の開催。

ウェブフォントの未来
john Daggett

これから Web フォントについて話ます。
いくつか日本語の間違いがあるかもしれませんが、許してください。
自己紹介
アメリカで開発者として働いて８年前に日本に来て、
夏を楽しもうと思って、日本語を勉強をしようとおもったが、
ずっといることになった。
今 CSS 3 Fonts のモジュールを編集している。
Mozilla で firefox の開発もしている。

CSS @ Ten: The Next Big Thing
http://www.alistapart.com/articles/cssatten

今までに良くあることは、
フォントの表示は画像で扱っている。なぜフォントを直接
ダウンロードできないの？
と、話題になった。

選択肢が多くなりました。
デコモジなど。
フォントの選び方。
body {
font-family:Helvetica, Arial, sans-serif;
font-size: 12pt;
}
h1, h2, h3 {font-weight: bold }
en { font-style:italic: }

最初にあるフォントを使う。
Mac は Helvetica があるけれど、Windows は Arial が使われる。
よって、プラットフォームごとに微妙にちがう。
http://37signals.com/

もともと MS は Helvetica を使いたかったが、
ライノタイプからライセンスのお金を使いたくなかったので、
Helvetica と同じようなフォントを作ったのが Arial の登場。

http://www.ironicsans.com/helvarialquiz/

欧文のフォント、どこでも使えるものは少ない。
OS の日本語フォント、
　少ない！
　WIndows XP :MS ゴシック、MS明朝など
　Windows Vista 以上：メイリオ
　MacOS X: ヒラギノ角ゴシック、丸ゴシック、明朝

ほんとに少ない。
これだけのフォントしかないのは「苦労」

CSS3 Fonts で何が違ってくる？
　@font-face
OpenType 機能も使えるように。
開発中！
http://dev.w3.org/cswg/css3-fonts/
2-3ヶ月ごとに更新している。
今年、来年ぐらいに完了したい。

@font-face rule
10年前 Netscape とIEが実装
独自のフォント形式
CSS2 に定義、機能が多過ぎ
CSS3 Fonts: 利用する機能のみサポートしようという考え

昔はインターネットが遅かったので、なかなか普及しなかった。

@font-face の使い方。

@font-face {
font-family:Gentium;
src: url(fonts/Gentium.ttf);
}
body {font-family:Gentium, Georgia, serif; }

フォントを定義
フォント名は自由に選ぶ
１つのツール、１つのフォント
他のページに影響無し

多数のフォントウェイト
@font-face {
font-family:mpluslp:
src:url(mplus-lp-regular.ttf);
}
@font-face {
font-family:mpluslp:
......

フォント形式のヒント
　フォント形式を宣言
　未サポート形式はダウンロードしない
　truetype と opentype は同じ意味

ローカルフォントの利用
　src: local("Gentium"), url(fonts/Gentium.ttf)

　フォントがあれば使う
　なければダウンロードする
　フォント名はフルネーム（Font book 参照）または PostScript (safari/firefoxのみ）

さよなら Arial ?

unicode-range
合成フォントの作成
使う範囲を定義する
定義した範囲のフォントデータだけ使う

unicode-range: U+000-5FFF, U+1e000-1fff, U+2000-2fff
二つのフォントを合成して使うことができる。
なぜ必要かというと、日本語のフォントがいらない時など。

同一生成元ポリシー
ページに使うフォントは同じドメインのみからダウンロード
他ドメインからはダウンロードしない
CORSを利用すれば他ドメインからのダウンロードは可能
Firefox, IE9 のみ実装

同じドメイン
　http://www.example.com:80/

CORS について　

サポートされている形式
　EOT
　TrueType/OpenType
Woff
svg

現在の状態

　ttf/otf woff svg eot
IE 9 9 ●

多数の形式の使い方。
IE8 以下と他のブラウザー

@font-face
font-family:Gentium;
src:url(GenR102.eot)
}
@font-face {
font-family; Gentium;
src:url....
}

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
IE は必ずフォントをダウンロードしてしまうことの回避策。

WOFF の歴史
ウェブ上の共通フォント形式がない
　共同提案：
　　Tal Leming (Type Supply)
Erik van Blokland
Jonathan Kew
色々なブラウザー開発者もフォント設計者も参加
Firefox 3.6 と

IE9 Developer Preview 3 WOFF のデモページ

WOFF の特徴
OpenType データの可逆圧縮
パソコン用とウェブ用で別形式にしたい
追加のメタデータも定義可能
簡単な実装
DRM 無し

WOFF 形式

フォントレンダリング　理想と現実
アウトラインからピクセルまで
ビットマップフォント
　MS ゴシック 22ピクセルまではビットマップ、23px からアウトラインフォント
サブピクセルアンチエイリアシング　できるだけきれいに見せるため。

サブピクセルアンチエイリアシング
LEDピクセルの構造を利用
MS は ClearType と呼ばれている。
同じサブピクセルアンチエイリアシングでも OS ごとに結果が違う。
MacOS X のレンダリングは Windows に比べて少しだけ太く見える。

MacOS Xでデザインすると美しくみえるが、
ほとんどの人は Windows を使う。
XP と Windows 7 でも微妙に違う。
Windows でもだんだん良くなっている。
Win XP, Vista, Win7, MacOS X, Other

メイリオのレンダリング（ヒンティング有り、無し）
ヒンティングが無いフォントは小さくするとメチャクチャになる。
MacOS X はヒンティングデータを使わずに、自動的に修正している。
ヒンティングデータは何のため？

メイリオ
　Vista 以上
　アウトラインフォントのみ
　23,942 グリフ
　〜8MB
　93% グリフデータ
　33% ヒンティングデータ

現実の @font-face の使い方。
フォントを読み込む
　HTML ページ形式
m+ font family
font-weight 1000 〜 900
ウェイトが無いとヒラギノになってしまう。

ブラウザは、ダウンロードの間、何を表示している？
Safari: デフォルトフォントを利用、文字は非表示
Firefox: ロード中ロールバックフォントを利用、フォントダウンロード後、表示される。
　デザイナーは嫌がるが、利用者は 7秒待ちたくない。
Opera は何秒表示しないかをコントロールできる。
　フォントのダウンロードが間に合わなかった場合の対応。
複雑なページ設計、複雑なダウンロード順序

Firebug のようなツールがおすすめ！

日本語のウェブフォント
　日本語のフォントは主に印刷むけ
　文字が多い、サイズが大きい
　漢字が複雑なので設計価格が高い
　縦書きグリフはウェブ上で利用できない
　欧文フォントに比べ、日本語のウェブフォントは完全に別の製品になる。

3000文字程度の漢字で 99.9% 、実際に使われている状況を達成できる。

デコもじ
http://decomoji.jp/pages/font/detail?id=52
ヒラギノを設計した会社（字游工房）

フォントを分割すれば、効率よく使える。
unicode-range を利用
　ダウンロード量が減る
　フォント作成者側で分割してくれるとベスト
　例えば第一水準と第二水準とで分離

SVG フォント
　SVGを利用、フォントを定義、HTMLで使う
　XML 形式
　定義がシンプル、機能は無い
　ヒンティングもない
　Acid 3 に必要
　iPhone, iPad のため
　テキスト形式なので圧縮が必要

SVG フォントのグリフ
SVG の仕様書を見ると グリフタグに他のタグは入れられない

http://people.mozilla.org/~jdaggett/tests/svgfonttest.html
Windows 上、ヒンティングデータがない場合

OpenType 機能
二つの文字が近づいた時に、１つの繋がった文字に変更する。
ある文字が語末になった時に形を変えるなど。
筆記体のように隣の文字に繋げることができる。
数字の表示方法を Old-Style にもできる。3や7を下げて読みやすくできる。
自動フラクション。2 1/3 などを自動的に表示できる。(この機能はレシピで使われることが多い）
昔の漢字を使う「麴町」「大學」など

これからは？
未来の話
　フォントサービスが多くなる
　日本語の専用サービスも
　客の依頼による自動フォント作成
　レンダリング問題が少なくなる
　OpenType 機能が多くなる
　縦書き？　（特に iPad の影響で）

言葉のデザイン 2010
オンスクリーン・タイポグラフィを考える
http://www.kotobanodesign.com/