6/30/2010

[&] 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 フォントについて話ます。
いくつか日本語の間違いがあるかもしれませんが、許してください。
自己紹介
アメリカで開発者として働いて8年前に日本に来て、
夏を楽しもうと思って、日本語を勉強をしようとおもったが、
ずっといることになった。
今 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; }

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

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

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

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