Upload
chihiro-akiba
View
3.236
Download
2
Embed Size (px)
DESCRIPTION
バイドゥ社内勉強会の発表用スライド
Citation preview
Web Fontのいまバイドゥ社内勉強会 秋葉ちひろ
2012.7.27
2002年から策定が開始
2011年10月4日にW3Cの仕様書でワーキングドラフト(CSS Fonts Module Level 3)
ブラウザの実装がやっと始まって実用レベルに
Webフォントについて
今までは、自分のパソコンに入っているフォントしか表示できなかった
Webフォントについて
MSゴシック/Windows
新ゴ(モリサワ)・明朝オールド(イワタ)/Windows
くそ重い
海外では先行して発展
文字数が少なく、アルファベット(大文字・小文字)、数字、記号、などあわせてもせいぜい100~200KB
オリジナルフォントも作りやすい
海外では先行して発展
文字数が多すぎる(漢字が鬼)
教育漢字(小学6年生までに習う漢字)だけだとしても1,006字
常用漢字だと2136字
漢検1級の対象漢字となると約6,000字
日本では難しい理由
全部含めるとフォントファイルは10MBにも…
10MB→光回線でも少々しんどい
イーモバ・Wimax、3Gだとストレスになるだけ
日本では難しい理由
昔ながらのフォントベンダーさんの頭がカタい
モリサワ:484書体・52,500円/年
イワタ:1書体あたり・10,500円~
フォントワークス: 1書体あたり・18,900円~
モトヤ
日本では難しい理由
昔ながらのフォントベンダーさんの頭がカタい
われわれは紙で勝負だ!
Webで表示できるようになったらコピーされまくりじゃないか!
ライセンス料はどうするんだ!
日本では難しい理由
本格的サービス開始
フォントベンダーを巻き込んだWebフォントサービス
イワタ・フォントワークス・モトヤなど
モリサワも加わって約600書体
入会金:10,500円、月額1,050円~
本格的なサービス開始
本格的サービス開始
モリサワが独自に始めたサービス
PVによって価格が変わる
30万PV:4,200円/3ヶ月
本格的なサービス開始
更新のコスパがよい
「Webの特性」と「デザイナーのエゴ」の両立
レスポンシブにもやさしい
メリット
お金がかかる(だいたい月に1,000~2,000円程度)
表示速度
フォントファイルが重いので閲覧できるまでに時間がかかる
デメリット
1.使っている文字のみをサブセット化
2.その都度jsで判断
表示方法
HTMLとCSSを送る
使われている文字のみのフォントファイルを返す
1.使っているフォントのみをサブセット化
今日は暑いですね。
いすはねで暑今日。
無駄な文字が省かれるのでフォントファイルは軽くなる
Webサイト全体でもおそらく2,000文字ぐらい→200KBぐらい
ページ遷移をしても、一度フォントファイルを読み込んでいるのでストレスなく見れる
1.使っているフォントのみをサブセット化
jsを読みこませるだけなので導入は簡単
その都度どの文字を使っているのか判定して返す(?)ので、時間がかかる
2.その都度jsで判断
jsを読みこませるだけなので導入は簡単
その都度どの文字を使っているのか判定して返す(?)ので、時間がかかる
2.その都度jsで判断
font+さんからAPIが提供されていて、最初のデバイスフォントを呼び出さずに、「消えた状態」→「Webフォント」も可能に
パッと見たときに文字が表示されていない状態になる
2.その都度jsで判断
ユーザーのことを考えるといまいち使う気になれない
ちらつきもいやだし、文字の表示を待つのもいや
2.その都度jsで判断
使えるところはどんどん使おう!
ナビゲーションやカテゴリタイトルといった、静的な部分だけサブセット化して使う
動的なコンテンツはデバイスフォントを使う
いまの時点での最良の方法