• Like
20120726_openend_ebookpro_mediverse_sakai_font_emb
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,686
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. EPUB3技術解説セミナー3フォント埋め込み/ウェブフォント/最新動向 2012年7月26日(木)15:00 境祐司 @commonstyle ¦ 電子書籍メディア論
  • 2. profile YOUJI SAKAIInstructional Designer | eBook Designer 境祐司
  • 3. BOOKSウェブレイアウトの EPUB3スタンダード Webデザイン基礎 教科書 デザインガイド 改訂3版 InDesign CS6で作るEPUB 3 標準ガイドブック 森 裕司, 境 祐司, 林 拓也, 向井 領治
  • 4. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  • 5. テキスト
  • 6. EPUB3技術解説セミナー3本日のテーマ: フォント埋め込み ウェブフォント EPUB3 最新動向
  • 7. EPUB 3 Font embedding / Web Fonts電子書籍の検証方法
  • 8. EPUB 3 Font embedding / Web Fonts検証用のEPUBファイルを作成
  • 9. EPUB 3 Font embedding / Web Fonts Sigil http://code.google.com/p/sigil/
  • 10. EPUB 3 Font embedding / Web Fonts Sigil http://code.google.com/p/sigil/
  • 11. EPUB 3 Font embedding / Web Fonts Sigil http://code.google.com/p/sigil/
  • 12. EPUB 3 Font embedding / Web Fonts
  • 13. EPUB 3 Font embedding / Web Fonts Making epub happenThe development blog of Sigil, the epub editor http://sigildev.blogspot.jp/
  • 14. EPUB 3 Font embedding / Web Fonts
  • 15. EPUB 3 Font embedding / Web Fonts メタエディター
  • 16. EPUB 3 Font embedding / Web Fonts メタエディター
  • 17. EPUB 3 Font embedding / Web Fonts メタエディター
  • 18. EPUB 3 Font embedding / Web Fonts メタエディター
  • 19. EPUB 3 Font embedding / Web Fonts EPUBファイルを 保存
  • 20. EPUB 3 Font embedding / Web Fonts テキストをコピー見出しのマークアップ
  • 21. EPUB 3 Font embedding / Web Fonts
  • 22. EPUB 3 Font embedding / Web Fonts
  • 23. EPUB 3 Font embedding / Web Fonts
  • 24. EPUB 3 Font embedding / Web Fonts 大見出し タイトル
  • 25. EPUB 3 Font embedding / Web Fonts 中見出し 章のタイトル
  • 26. EPUB 3 Font embedding / Web Fonts 小見出し 節のタイトル
  • 27. EPUB 3 Font embedding / Web Fonts
  • 28. EPUB 3 Font embedding / Web Fonts
  • 29. EPUB 3 Font embedding / Web Fonts <p><br /></p> を削除
  • 30. EPUB 3 Font embedding / Web Fonts
  • 31. EPUB 3 Font embedding / Web Fonts
  • 32. EPUB 3 Font embedding / Web Fonts [見出しから目次を生成]
  • 33. EPUB 3 Font embedding / Web Fonts
  • 34. EPUB 3 Font embedding / Web Fonts
  • 35. EPUB 3 Font embedding / Web Fonts ファイル名を付けて保存
  • 36. EPUB 3 Font embedding / Web Fonts
  • 37. EPUB 3 Font embedding / Web Fontsリーディングシステムで確認
  • 38. EPUB 3 Font embedding / Web Fonts Adobe Digital Editions 1.8.x
  • 39. EPUB 3 Font embedding / Web Fonts Adobe Digital Editions 1.8.x
  • 40. EPUB 3 Font embedding / Web FontsiOS, Androidで確認
  • 41. EPUB 3 Font embedding / Web Fonts Dropboxにコピーする
  • 42. EPUB 3 Font embedding / Web Fonts
  • 43. EPUB 3 Font embedding / Web Fonts
  • 44. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro
  • 45. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro デフォルトスタイル
  • 46. EPUB 3 Font embedding / Web Fonts iPad
  • 47. EPUB 3 Font embedding / Web Fonts iBooks
  • 48. EPUB 3 Font embedding / Web Fonts iBooks デフォルトスタイル
  • 49. EPUB 3 Font embedding / Web Fonts検証用のスタイルシートを追加
  • 50. EPUB 3 Font embedding / Web Fonts 空のスタイルシートを追加
  • 51. EPUB 3 Font embedding / Web Fonts
  • 52. EPUB 3 Font embedding / Web Fonts *{ margin: 0; padding: 0; }
  • 53. EPUB 3 Font embedding / Web Fonts
  • 54. EPUB 3 Font embedding / Web Fonts
  • 55. EPUB 3 Font embedding / Web Fonts<link href="../Styles/Style0001.css" rel="stylesheet" type="text/ css" />
  • 56. EPUB 3 Font embedding / Web Fonts
  • 57. EPUB 3 Font embedding / Web Fonts font-size: 100%; を追加
  • 58. EPUB 3 Font embedding / Web Fonts
  • 59. EPUB 3 Font embedding / Web Fontsfont-weight: normal; を追加
  • 60. EPUB 3 Font embedding / Web Fonts
  • 61. EPUB 3 Font embedding / Web Fontsリーディングシステムで確認
  • 62. EPUB 3 Font embedding / Web Fonts iBooks
  • 63. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro
  • 64. EPUB 3 Font embedding / Web Fonts
  • 65. EPUB 3 Font embedding / Web Fonts
  • 66. EPUB 3 Font embedding / Web Fontsデフォルトスタイル スタイルのリセット
  • 67. EPUB 3 Font embedding / Web Fontsフォント埋め込みFont embeddingウェブフォント Web Fonts
  • 68. EPUB 3 Font embedding / Web FontsEPUB 3フォントのコアメディアタイプ OpenTypeフォント application/vnd.ms-opentype WOFFフォント application/font-woff
  • 69. EPUB 3 Font embedding / Web Fonts OSA フォント コンテンツ リーディング (電子書籍) システム フォントなし フォント
  • 70. EPUB 3 Font embedding / Web Fonts OSB フォント コンテンツ リーディング (電子書籍) システム フォントなし フォントなし
  • 71. EPUB 3 Font embedding / Web Fonts OSC フォント コンテンツ リーディング (電子書籍) システム フォント フォントなし
  • 72. EPUB 3 Font embedding / Web Fonts OSD フォント コンテンツ リーディング (電子書籍) システム フォント フォント
  • 73. EPUB 3 Font embedding / Web Fonts GALAPAGOS STORE ビューアアプリ
  • 74. EPUB 3 Font embedding / Web Fonts GALAPAGOS STORE ビューアアプリ
  • 75. EPUB 3 Font embedding / Web Fonts
  • 76. EPUB 3 Font embedding / Web Fontsデバイス インストールフォント フォント
  • 77. EPUB 3 Font embedding / Web Fonts OSA フォント コンテンツ リーディング (電子書籍) システム フォントなし フォント
  • 78. EPUB 3 Font embedding / Web Fonts 縦書きビューワ for Android ※EPUBは簡易対応
  • 79. EPUB 3 Font embedding / Web Fonts 縦書きビューワ for Android
  • 80. EPUB 3 Font embedding / Web Fonts 縦書きビューワ for Android
  • 81. EPUB 3 Font embedding / Web Fonts 縦書きビューワ for Android
  • 82. EPUB 3 Font embedding / Web Fonts 縦書きビューワ for Android
  • 83. EPUB 3 Font embedding / Web Fontsデバイス インストールフォント フォント
  • 84. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro for Android
  • 85. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro for Android
  • 86. EPUB 3 Font embedding / Web Fonts Himawari Reader Pro for Android
  • 87. EPUB 3 Font embedding / Web Fontsデバイス インストールフォント フォント
  • 88. EPUB 3 Font embedding / Web Fonts OSA フォント コンテンツ リーディング (電子書籍) システム フォントなし フォント
  • 89. EPUB 3 Font embedding / Web Fonts OSA フォント コンテンツ リーディング (電子書籍) システム フォントなし フォントなし
  • 90. EPUB 3 Font embedding / Web FontsiPadで使用できるフォント iOS5 ※リーディングシステムによっては表示できないので検証必須
  • 91. EPUB 3 Font embedding / Web Fonts
  • 92. EPUB 3 Font embedding / Web Fonts 中国語
  • 93. EPUB 3 Font embedding / Web Fonts日本語
  • 94. EPUB 3 Font embedding / Web Fonts
  • 95. EPUB 3 Font embedding / Web Fonts iOS Fonts http://iosfonts.com/
  • 96. EPUB 3 Font embedding / Web Fonts OSB フォント コンテンツ リーディング (電子書籍) システム フォントなし フォントなし
  • 97. EPUB 3 Font embedding / Web Fonts font-familyp{ font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;}
  • 98. EPUB 3 Font embedding / Web Fonts
  • 99. EPUB 3 Font embedding / Web Fonts iBooks iOS WebKitヒラギノ明朝 ProN W3
  • 100. EPUB 3 Font embedding / Web Fonts iBooks iOS WebKitヒラギノ明朝 ProN W3
  • 101. EPUB 3 Font embedding / Web Fonts iBooks iOS WebKitヒラギノ明朝 ProN W3
  • 102. EPUB 3 Font embedding / Web Fonts
  • 103. EPUB 3 Font embedding / Web Fonts
  • 104. EPUB 3 Font embedding / Web Fonts デフォルト ヒラギノ明朝 ProN W3
  • 105. EPUB 3 Font embedding / Web Fonts
  • 106. EPUB 3 Font embedding / Web Fonts
  • 107. EPUB 3 Font embedding / Web Fontscom.apple.ibooks.display-options.xml
  • 108. EPUB 3 Font embedding / Web Fontscom.apple.ibooks.display-options.xml iBooks
  • 109. EPUB 3 Font embedding / Web Fonts OSC フォント コンテンツ リーディング (電子書籍) システム フォント フォントなし
  • 110. EPUB 3 Font embedding / Web Fonts OSD フォント コンテンツ リーディング (電子書籍) システム フォント フォント
  • 111. EPUB 3 Font embedding / Web Fontsフォント埋め込みFont embedding
  • 112. EPUB 3 Font embedding / Web Fonts Adobe Digital Editions 1.8sample;Pigs, Gourds, and Wikis: Embedding Fonts in EPUB- iPad, iPhone AND nookhttp://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html
  • 113. EPUB 3 Font embedding / Web Fonts iBooks iOS WebKit
  • 114. EPUB 3 Font embedding / Web Fonts
  • 115. EPUB 3 Font embedding / Web Fonts DL Reader iOS WebKit
  • 116. EPUB 3 Font embedding / Web Fonts Kinoppy iOS WebKit
  • 117. EPUB 3 Font embedding / Web Fonts
  • 118. EPUB 3 Font embedding / Web Fonts サンプルの場合TrueType
  • 119. EPUB 3 Font embedding / Web Fonts@font-face { font-family: Prophecy Script; font-style: normal; font-weight: normal; src:url("Fonts/Prophecy_Script.ttf");}p.letter { font-family: "Prophecy Script";}
  • 120. EPUB 3 Font embedding / Web Fontsp.letter { font-family: "Prophecy Script";}<p class="letter">Dear sir I received your letter and Iam sorry that I can not comply withyour wishes ....</p>
  • 121. EPUB 3 Font embedding / Web FontsEPUB 3フォントのコアメディアタイプ OpenTypeフォント application/vnd.ms-opentype WOFFフォント application/font-woff
  • 122. EPUB 3 Font embedding / Web Fonts公開されているEPUB3固定レイアウトのサンプル epub-samples http://code.google.com/p/epub-samples/ ダウンロードリスト http://code.google.com/p/epub-samples/downloads/list
  • 123. EPUB 3 Font embedding / Web Fontswasteland-woff-20120118.epub
  • 124. EPUB 3 Font embedding / Web Fonts
  • 125. EPUB 3 Font embedding / Web Fonts
  • 126. EPUB 3 Font embedding / Web Fonts スタイルシート@font-face { font-family: OldStandard; font-weight: normal; font-style: normal; src:url(OldStandard-Regular.woff) format(woff);}body { font-family: OldStandard, sans-serif;}
  • 127. EPUB 3 Font embedding / Web Fonts スタイルシート@font-face { font-family: OldStandard; font-weight: normal; font-style: normal; src:url(OldStandard-Regular.woff) format(woff);}body { font-family: OldStandard, sans-serif;} fallback
  • 128. EPUB 3 Font embedding / Web Fonts パッケージドキュメント(.opf)<manifest><item id="font.OldStandard.regular"href="OldStandard-Regular.woff"media-type="application/font-woff"/></manifest>
  • 129. EPUB 3 Font embedding / Web Fonts パッケージドキュメント(.opf)<manifest><item id="font.OldStandard.regular" href="OldStandard-Regular.woff"media-type="application/font-woff"/><item id="font.OldStandard.italic" href="OldStandard-Italic.woff"media-type="application/font-woff"/><item id="font.OldStandard.bold" href="OldStandard-Bold.woff"media-type="application/font-woff"/></manifest>
  • 130. EPUB 3 Font embedding / Web Fonts
  • 131. EPUB 3 Font embedding / Web Fonts流用を防止するための「難読化」 EPUB Open Container Format (OCF) 3.0 5 Font Obfuscation(フォントの難読化) http://idpf.org/epub/30/spec/epub30-ocf.html#font-obfuscation
  • 132. EPUB 3 Font embedding / Web Fonts EPUBオーサリングソフト 「Sigil」はフォントデータの 難読化をサポート
  • 133. EPUB 3 Font embedding / Web Fonts フォント難読化
  • 134. EPUB 3 Font embedding / Web Fonts encryption.xml
  • 135. EPUB 3 Font embedding / Web Fontsウェブフォント Web Fonts
  • 136. EPUB 3 Font embedding / Web Fonts海外では2010年頃から、画像を極力使用せず、CSSの指定だけでデザインされたウェブサイトが増えてきた
  • 137. EPUB 3 Font embedding / Web Fontsウェブフォントはサーバに置かれており指定されたフォントを配信閲覧者のデバイスにフォントデータがインストールされていなくても、同一の表示が可能になる
  • 138. EPUB 3 Font embedding / Web Fontsウェブフォント配信サービスではすでに権利処理が完了しているため制作者はCSSでフォントを指定するだけでよい
  • 139. EPUB 3 Font embedding / Web Fonts問題点:ダウンロードからレンダリングまでのタイムラグがあるため指定したフォントに切り替わる様子が見えてしまう
  • 140. EPUB 3 Font embedding / Web Fontsダイナミック・サブセッティング・テクノロジーDynamic Subsetting Technology
  • 141. EPUB 3 Font embedding / Web Fonts文字のサブセットを効率よくダウンロードダイナミック・サブセッティング・テクノロジーDynamic Subsetting Technology
  • 142. EPUB 3 Font embedding / Web Fonts TypeSquare http://typesquare.com/
  • 143. EPUB 3 Font embedding / Web Fonts・モリサワのフォントから154書体を利用可能・閲覧環境に応じてTrueType もしくはWOFFフォーマットで配信
  • 144. EPUB 3 Font embedding / Web Fonts利用したいサイトのURLを登録生成されるスクリプトをページのhead要素内にコピーフォント指定は、font-familyプロパティ例:font-family: "Ryumin Regular KL" ;
  • 145. EPUB 3 Font embedding / Web Fonts
  • 146. EPUB 3 Font embedding / Web Fonts
  • 147. EPUB 3 Font embedding / Web Fonts
  • 148. EPUB 3 Font embedding / Web Fonts
  • 149. EPUB 3 Font embedding / Web Fonts
  • 150. EPUB 3 Font embedding / Web Fonts現在、埋め込みフォントの扱いには制限があるブラウザベースの電子書籍コンテンツであれば利用者の閲覧環境に左右されないページデザインが可能になる...かもしれない
  • 151. EPUB 3 Font embedding / Web FontsEPUB3 最新動向
  • 152. EPUB3の最新情報はIDPFのサイトで確認してください http://idpf.org/
  • 153. Thank you for your attention. ご清聴ありがとうございました
  • 154. EPUB3技術解説セミナー3フォント埋め込み/ウェブフォント/最新動向 2012年7月26日(木)15:00 境祐司 @commonstyle ¦ 電子書籍メディア論
  • 155. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign