Web Fonts @ Douban Read

9da83228d0bc031d06a95ae8e982f455?s=47 MieMie
January 10, 2015

Web Fonts @ Douban Read

Slide 中链接较多,建议直接从右侧下载 PDF 看。
Download the PDF file to make the links clickable.

9da83228d0bc031d06a95ae8e982f455?s=128

MieMie

January 10, 2015
Tweet

Transcript

  1. @ Web Fonts 抣抣⣵鵄 ” ⚥㕂껷㾉$44䒓〄罏㣐⠔

  2. F2E @ < >

  3. F2E @

  4. F2E @

  5. Web Apps and more https://speakerdeck.com/mockee/web-apps-and-more 鲮⻊涸抳䠭 https://speakerdeck.com/mockee/zhuan-hua-de-ling-gan ꢓ靀碫Web䎾欽⵸畮䪮助䱲程 https://speakerdeck.com/mockee/yue-du-lei-web-ying-yong-qian-duan-ji-zhu- tan-suo

    Type is Beautiful https://speakerdeck.com/mockee/type-is-beautiful-for-hof F2E @ by Mockee
  6. Italic Type l ⼀一

  7. Italic Type Bold 䔂靈叻곿 <b> <strong> Underline Ꝇ䱹欽䨪ⴢ絁 <u> Italic

    䓳䔂靈䒸欽 <i> <em> Monospace ➿瀦 <code> ⚥俒
  8. Italic Type “In typography, italic type is a cursive font

    based on a stylized form of calligraphic handwriting.” —— Wikipedia font-family: STKaiti, "AR PL UKai", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW-Kai"
  9. Italic Type 《故事的解剖》(臺版 Story)

  10. Italic Type <p class="italic"> </p> italic,楷体,italic,楷体 font-style: italic font-style: normal

  11. Italic Type ——吉井忍 , 帝都本格日本料理 font-family: STKaiti ... font-style: normal

    ×
  12. Italic Type font-family: Georgia, STKaiti ... font-style: italic ——吉井忍 ,

    帝都本格日本料理 ×
  13. Italic Type <span class="lang-en">italic</span> <span class="lang-cn">楷体</span> 复杂度↑ 速度↓

  14. font-family: "Georgia Italic", "Georgia-Italic", "Georgia" Italic Type font-family: [ <family-name>

    | <generic-family> ] # CSS Fonts Module Level 3 font-family 使⽤用 font face name 为 CSS 标准未定义⾏行为 font face name PostScript name full font name family name
  15. @font-face font-family: "arkitalic" src: local('Georgia-Italic'), local('Georgia Italic') font-weight: normal font-style:

    normal @font-face font-family: "arkitalic" src: local('Georgia-BoldItalic'), local('Georgia Bold Italic') font-weight: bold font-style: normal Italic Type
  16. Italic Type font-family: "arkitalic", STKaiti, "AR PL UKai", "AR PL

    KaitiM GB", KaiTi, KaiTi_GB2312, "TW-Kai" ——吉井忍 , 帝都本格日本料理 ✓
  17. @font-face font-family: "arkitalic" src: local(‘Georgia-Italic'), local('Georgia Italic') font-weight: normal font-style:

    normal `local()`, no @font-face FOUT problem! http://www.paulirish.com/2009/fighting-the-font-face-fout/ https://www.evernote.com/l/AFSnuuXKCctIy4larEMFFLlMJYgCbITEVqU Italic Type
  18. Legibility 鳹霋䏞

  19. font-size: 16px ♴兜鸑㾓䍋⚥薉俒㶶⡤涸䒸〿♶僒鳹霋կ double quotes & single quotes Legibility ×

    ✴ Windows⚥Ⱘ剣Bitmap Glyph涸⚥俒㶶⡤鳅㺂僒鳹霋⡎Windows♴崹錢㐼♶⠔⢪欽Web font⚥涸Bitmap Glyphկ
  20. Legibility unicode-range src: local('simsun'); unicode-range: U+2018,U+2019,U+21C,U+201D; ×

  21. Grid:16 PPEM (Pixels Per EM) Arial Arkpunctuation Align to Pixel

    Grid Legibility By FontForge
  22. Legibility 12px 14px 16px 18px 20px Arial Arkpunctuation

  23. Punctuation Trimming 》 。 ) ” 叻挿䮥⾓

  24. text-spacing: normal | none | [ trim-start | space-start ]

    || [ trim-end | space-end | allow-end ] || [ trim-adjacent | space- adjacent ] || no-compress || ideograph-alpha || ideograph-numeric || punctuation CSS Text Level 4 Punctuation Trimming
  25. Punctuation Trimming http://www.w3.org/TR/2007/WD-css3-text-20070306/ punctuation-trim: none | [start || [ end

    | allow-end ] || adjacent] text-trim: normal | force-start || [ keep-end | force-end ] || no- justify http://www.w3.org/TR/2011/WD-css3-text-20110215/
  26. Punctuation Trimming http://en.wikipedia.org/wiki/Kerning Kerning

  27. Punctuation Trimming OpenType: GPOS lookups, kerning By FontForge

  28. Punctuation Trimming Mojikumi ✝ Mojikumi: Determines spacing between punctuation, symbols,

    numbers, and other character classes in Japanese type. https://github.com/houkanshan/mojikumi
  29. Punctuation Trimming Punctuations.std https://github.com/notcome/Punctuations.std Han.js 3.0 http://css.hanzi.co/ Ligatures <char>,</char> 鵶㶶

    letter-spacing
  30. CJK Web Fonts CJK-Subsetter http://hxgdzyuyi.github.io/blog/chinese-subset.html 〳⟄㖈緸곜⚥⢪欽⚥俒㶶⡤涸3BDL玐䎸կ

  31. Web Fonts Sucks

  32. Inline Vertical Position & Line Box Height 遤ⰻ㘌湬⡙縨遤渱넞

  33. Inline Vertical Position Helvetica ׫ౝޑ 爙䠑㕃 㢴猫㶶⡤㖈ず♧⚡ baseline ծ湱ず俒劥呋䒭涸inline box(es)♳傞俒劥涸遤ⰻ㘌湬⡙縨⠔㔔㶶⡤baseline⡙

    縨涸♶ず罜」⻊կ line box inline box inline box height = line-height <span> </span> font-family: Helvetica, 'Hiragino Sans GB'
  34. font-family: arial, Helvetica, 'Hiragino Sans GB' font-family: Helvetica, 'Hiragino Sans

    GB' - = Inline Vertical Position 图像减法 http://jsbin.com/toseraxuya/7/
  35. Inline Vertical Position

  36. Chrome,Opera⧫ぢ✵嶊ꤑ鵯猫䕧ㆇ崵霚⚥➑㖈⢪ 欽Web Font涸傞⦫〄欰⡙縨」⻊կ Firefox,Safari⚥欽劥㖑㶶⡤ծWeb Font崵霚㖲剣⡙ 縨」⻊կ Vertical Position

  37. … Line Box Height Helvetica Arial ׫ౝޑ Georgia 楷体 “”

    爙䠑㕃 ⼶俒噶⡤ 㢴猫㶶⡤㖈ず♧⚡ baseline♶ず俒劥呋䒭inline boxes♳傞遤넞ծ俒劥涸遤ⰻ㘌湬⡙縨㖲⠔㔔㶶⡤涸 baseline⡙縨♶ず罜」⻊կ*&  line box inline box inline box height = line-height <span> </span> ✴ 㼆inline element杝用霃縨♸container湱ず涸㶶⡤⛲⠔剣ず呋遤⚹⽰⢪俒劥呋䒭湱ずկ http://jsbin.com/coqubinuti/1
  38. … Line Box Height 400px 402px 408px 408px 408px font-size:100px

    line-height: 2 (Chrome)
  39. … Line Box Height Helvetica ׫ౝ <1px? ♶ず崹錢㐼庪厩絕卓♶ず䔲㟞ꆀQY傞 $ISPNF⧫ぢ✵ぢ♴》侮ⵌQY⚂㢴遤♴佪卓⚹嫦遤杝用》侮 'JSFGPY⠔ぢ♳》侮ⵌQY㢴遤傞佪卓⚹䨾剣遤㹊꣢넞䏞湱⸈た》侮

    4BGBSJ 0QFSB⠔ぢ♳》侮ⵌQY㢴遤傞佪卓⚹嫦杝用》侮կ
  40. Inline Vertical Position & Line Box Height http://jsbin.com/kemabu/1 Web Fonts

  41. Sphinx baseline Ascender Height Descender Height Inline Vertical Position &

    Line Box Height
  42. Ascender Height Descender Height AH / DH OS )FMWFUJDB/FVF 952

    213 4.47 OS X, iOS Ⱶꫬ랱⡤ 880 120 7.33 OS X ⼶俒噶⡤ 860 140 6.14 OS X (FPSHJB 1549 444 3.49 * 4JN4VO㸢⡤ 220 36 6.11 XP "SJBM 1491 431 3.46 XP, 7 ,BJUJ@(#噶⡤ 220 36 6.11 XP, 7 䗎鲱꧈랱 1663 159 10.46 7 랱⡤皍 860 140 6.14 iOS %SPJE4BOT 1567 492 3.18 Android 俒屮끼䗎碛랱 1638 410 3.99 Android 䙼彂랱⡤ 880 120 7.33 - Inline Vertical Position & Line Box Height
  43. Win XP 3.46 – 6.11 Win 7 3.46 – 10.46

    OS X 4.47 – 7.33 iOS 4.47 – 6.14 Android 3.18 – 3.19 Inline Vertical Position & Line Box Height
  44. 䒸Ⰶ涸Xeb font䎾霃縨㽴ꆀ䱹鵛✵䔲⵸line boxⰻ 〳腊ⴀ梡涸Ⱖ➭㶶⡤Bscender♸Eescender涸嫱 ⢾կ ✴ Ⰼ鿈⢪欽vertical-align: top | bottom

    …⛲腊鼙⯝姼꡼곿⡎♶䒊雳կ <p> <span style="line-height: 0"> xxxxxxx </span> </p> 〳鍒Ɀ遤넞㟞⸈꡼곿կ Inline Vertical Position & Line Box Height
  45. Hints z

  46. Hints Unhinted TrueType font in GDI-ClearType rendering. http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

  47. Hints http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

  48. TTFAutoHint http://www.freetype.org/ttfautohint Font Squirrel http://www.fontsquirrel.com/ AutoHint: Hints Hint manually ?

  49. unhinted ttfautohint Font Squirrel unhinted ttfautohint Font Squirrel 16px 32px

    IE 8 Chrome 16px Hints
  50. Font Squirrel佪卓䔂✵TTFAutoHint ⡎Font Squirrel㖈㼭㶶〿♳涸庪厩絕卓剣僈儑」䕎 unhinted ttfautohint Font Squirrel Hints 㢕勇㕃䕎㖈㼭㶶〿♴䖎ꦼ⨞ⵌ嶊ꤑClearType㖈unhinted♳涸ꝷ뤼罜♶鸣䧭僈儑」䕎

  51. 18 PPEM font-size: 18px 16 PPEM font-size: 16px SVG +

    PNG Simple graphics Complex graphics Hints + hint
  52. Web Font Ready T … … Web Font⸈鲿唬崵

  53. Web Font Ready • FOUT (flash of unstyled text) •

    Web Fonts Loading Timeout http://jsbin.com/yujahaquro/7
  54. Article Data Layout, rendering Article Data Layout, rendering Web Font

    Ready Web Fonts Web Font Ready
  55. CSS Font Loading Module document.fonts.load().then() http://caniuse.com/#feat=font-loading Web Font Ready

  56. U+FFFD U+FFFD webfont_a ⚹䨾欽涸 Web Font patch ♧⚡瑟涯㶶痗㖈 U+FFFD ♳

    @font-face font-family: "webfont_a" url: src(webfont_a.woff) span font-family: webfont_a GET webfont_a.woff <span> &#xfffd; </span> default Web Font Ready
  57. U+FFFD U+FFFD scrollWidth = 100px scrollLeft = 99px offsetWidth =

    1px scrollWidth = 0px scrollLeft = 0px offsetWidth = 1px “onscroll” ! Font loaded Web Font Ready
  58. IE 6 – 9 <iframe> <head><style></style></head> <body> &#xfffd; </body> </iframe>

    Font loaded iframe.onload “Font files block the window’s onload event from firing in IE and Firefox” http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ Web Font Ready
  59. doc.fonts.load iframe.onload el.onscroll Font Ready Chrome 39+, Opera 26+ IE

    6 – 9 http://houkanshan.github.io/posts/2014/12/17/fontonload/ Web Font Ready
  60. Thanks. Fonts: Droid SerifInput Mono䙼彂랱⡤华⽂文楷体Georgia Browsers: Mac: Chrome 39.0, Firefox

    34.0.5, Safari 8.0.2, Opera 26.0 Win XP: IE6, IE7, IE8 Win 7: IE9 http://douban.com/people/houkanshan http://houkanshan.github.io