Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Fonts @ Douban Read

Mai Hou
January 10, 2015

Web Fonts @ Douban Read

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

Mai Hou

January 10, 2015
Tweet

Other Decks in Programming

Transcript

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

    䓳䔂靈䒸欽 <i> <em> Monospace ➿瀦 <code> ⚥俒
  2. 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"
  3. 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
  4. @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
  5. 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" ——吉井忍 , 帝都本格日本料理 ✓
  6. @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
  7. font-size: 16px ♴兜鸑㾓䍋⚥薉俒㶶⡤涸䒸〿♶僒鳹霋կ double quotes & single quotes Legibility ×

    ✴ Windows⚥Ⱘ剣Bitmap Glyph涸⚥俒㶶⡤鳅㺂僒鳹霋⡎Windows♴崹錢㐼♶⠔⢪欽Web font⚥涸Bitmap Glyphկ
  8. 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
  9. 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/
  10. Punctuation Trimming Mojikumi ✝ Mojikumi: Determines spacing between punctuation, symbols,

    numbers, and other character classes in Japanese type. https://github.com/houkanshan/mojikumi
  11. 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'
  12. … 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
  13. 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
  14. 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
  15. 䒸Ⰶ涸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
  16. 18 PPEM font-size: 18px 16 PPEM font-size: 16px SVG +

    PNG Simple graphics Complex graphics Hints + hint
  17. Web Font Ready • FOUT (flash of unstyled text) •

    Web Fonts Loading Timeout http://jsbin.com/yujahaquro/7
  18. 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
  19. U+FFFD U+FFFD scrollWidth = 100px scrollLeft = 99px offsetWidth =

    1px scrollWidth = 0px scrollLeft = 0px offsetWidth = 1px “onscroll” ! Font loaded Web Font Ready
  20. 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
  21. 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
  22. 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