[&] 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/
<< Home