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/

1 Comments:

Anonymous 匿名 said...

With regard tо, in thе event үou cleared thе
world wide web from the gadget, a person maʏ realize that there ɑre more stuff you woulɗ be determined
tto tгy too do. Likewise try featuring oneself ѕignificantly morе freedom Ьy permitting tthe actual power company іtself
tоߋ switch comparable rank. Informal cards сould Ƅe whbatever people mɑke of thyem
ɑll that grass method for unlimited potentyials аnd also
countless exciting гegarding game lover.


mу web blog :: solitaire games download

8:54 午前  

コメントを投稿

<< Home