Web Fonts @ Douban Read

by Mai Hou

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

F2E @ < >

Slide 3

Slide 3 text

F2E @

Slide 4

Slide 4 text

F2E @

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Italic Type l ⼀一

Slide 7

Slide 7 text

Italic Type Bold 䔂靈叻곿 Underline Ꝇ䱹欽䨪ⴢ絁 Italic 䓳䔂靈䒸欽 Monospace ➿瀦 ⚥俒

Slide 8

Slide 8 text

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"

Slide 9

Slide 9 text

Italic Type 《故事的解剖》（臺版 Story）

Slide 10

Slide 10 text

Italic Type

italic，楷体，italic，楷体 font-style: italic font-style: normal

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Italic Type font-family: Georgia, STKaiti ... font-style: italic ——吉井忍 , 帝都本格日本料理 ×

Slide 13

Slide 13 text

Italic Type italic 楷体复杂度↑ 速度↓

Slide 14

Slide 14 text

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: [ | ] # 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

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

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" ——吉井忍 , 帝都本格日本料理 ✓

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

Legibility 鳹霋䏞

Slide 19

Slide 19 text

font-size: 16px ♴兜鸑㾓䍋⚥薉俒㶶⡤涸䒸〿♶僒鳹霋կ double quotes & single quotes Legibility × ✴ Windows⚥Ⱘ剣Bitmap Glyph涸⚥俒㶶⡤鳅㺂僒鳹霋⡎Windows♴崹錢㐼♶⠔⢪欽Web font⚥涸Bitmap Glyphկ

Slide 20

Slide 20 text

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; ×

Slide 21

Slide 21 text

Grid：16 PPEM (Pixels Per EM) Arial Arkpunctuation Align to Pixel Grid Legibility By FontForge

Slide 22

Slide 22 text

Legibility 12px 14px 16px 18px 20px Arial Arkpunctuation

Slide 23

Slide 23 text

Punctuation Trimming 》。） ” 叻挿䮥⾓

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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/

Slide 26

Slide 26 text

Punctuation Trimming http://en.wikipedia.org/wiki/Kerning Kerning

Slide 27

Slide 27 text

Punctuation Trimming OpenType: GPOS lookups, kerning By FontForge

Slide 28

Slide 28 text

Punctuation Trimming Mojikumi ✝ Mojikumi: Determines spacing between punctuation, symbols, numbers, and other character classes in Japanese type. https://github.com/houkanshan/mojikumi

Slide 29

Slide 29 text

Punctuation Trimming Punctuations.std https://github.com/notcome/Punctuations.std Han.js 3.0 http://css.hanzi.co/ Ligatures , 鵶㶶 letter-spacing

Slide 30

Slide 30 text

CJK Web Fonts CJK-Subsetter http://hxgdzyuyi.github.io/blog/chinese-subset.html 〳⟄㖈緸곜⚥⢪欽⚥俒㶶⡤涸3BDL玐䎸կ

Slide 31

Slide 31 text

Web Fonts Sucks

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Inline Vertical Position Helvetica ׫ౝޑ 爙䠑㕃 㢴猫㶶⡤㖈ず♧⚡ baseline ծ湱ず俒劥呋䒭涸inline box(es)♳傞俒劥涸遤ⰻ㘌湬⡙縨⠔㔔㶶⡤baseline⡙ 縨涸♶ず罜」⻊կ line box inline box inline box height = line-height font-family: Helvetica, 'Hiragino Sans GB'

Slide 34

Slide 34 text

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/

Slide 35

Slide 35 text

Inline Vertical Position

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

… Line Box Height Helvetica Arial ׫ౝޑ Georgia 楷体 “” 爙䠑㕃 ⼶俒噶⡤ 㢴猫㶶⡤㖈ず♧⚡ baseline♶ず俒劥呋䒭inline boxes♳傞遤넞ծ俒劥涸遤ⰻ㘌湬⡙縨㖲⠔㔔㶶⡤涸 baseline⡙縨♶ず罜」⻊կ*& line box inline box inline box height = line-height ✴ 㼆inline element杝用霃縨♸container湱ず涸㶶⡤⛲⠔剣ず呋遤⚹⽰⢪俒劥呋䒭湱ずկ http://jsbin.com/coqubinuti/1

Slide 38

Slide 38 text

… Line Box Height 400px 402px 408px 408px 408px font-size：100px line-height: 2 (Chrome)

Slide 39

Slide 39 text

… Line Box Height Helvetica ׫ౝ <1px？ ♶ず崹錢㐼庪厩絕卓♶ず䔲㟞ꆀQY傞 $ISPNF⧫ぢ✵ぢ♴》侮ⵌQY⚂㢴遤♴佪卓⚹嫦遤杝用》侮 'JSFGPY⠔ぢ♳》侮ⵌQY㢴遤傞佪卓⚹䨾剣遤㹊꣢넞䏞湱⸈た》侮 4BGBSJ 0QFSB⠔ぢ♳》侮ⵌQY㢴遤傞佪卓⚹嫦杝用》侮կ

Slide 40

Slide 40 text

Inline Vertical Position & Line Box Height http://jsbin.com/kemabu/1 Web Fonts

Slide 41

Slide 41 text

Sphinx baseline Ascender Height Descender Height Inline Vertical Position & Line Box Height

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

䒸Ⰶ涸Xeb font䎾霃縨㽴ꆀ䱹鵛✵䔲⵸line boxⰻ 〳腊ⴀ梡涸Ⱖ➭㶶⡤Bscender♸Eescender涸嫱 ⢾կ ✴ Ⰼ鿈⢪欽vertical-align: top | bottom …⛲腊鼙⯝姼꡼곿⡎♶䒊雳կ

xxxxxxx

〳鍒Ɀ遤넞㟞⸈꡼곿կ Inline Vertical Position & Line Box Height

Slide 45

Slide 45 text

Hints z

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

unhinted ttfautohint Font Squirrel unhinted ttfautohint Font Squirrel 16px 32px IE 8 Chrome 16px Hints

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

18 PPEM font-size: 18px 16 PPEM font-size: 16px SVG + PNG Simple graphics Complex graphics Hints + hint

Slide 52

Slide 52 text

Web Font Ready T … … Web Font⸈鲿唬崵

Slide 53

Slide 53 text

Web Font Ready • FOUT (flash of unstyled text) • Web Fonts Loading Timeout http://jsbin.com/yujahaquro/7

Slide 54

Slide 54 text

Article Data Layout, rendering Article Data Layout, rendering Web Font Ready Web Fonts Web Font Ready

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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 � default Web Font Ready

Slide 57

Slide 57 text

U+FFFD U+FFFD scrollWidth = 100px scrollLeft = 99px offsetWidth = 1px scrollWidth = 0px scrollLeft = 0px offsetWidth = 1px “onscroll” ! Font loaded Web Font Ready

Slide 58

Slide 58 text

IE 6 – 9 � 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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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