Web Fonts @ Douban Read

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

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 %SPJE
    4BOT 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