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. 3.
  2. 4.
  3. 7.

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

    䓳䔂靈䒸欽 <i> <em> Monospace ➿瀦 <code> ⚥俒
  4. 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"
  5. 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
  6. 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
  7. 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" ——吉井忍 , 帝都本格日本料理 ✓
  8. 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
  9. 19.

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

    ✴ Windows⚥Ⱘ剣Bitmap Glyph涸⚥俒㶶⡤鳅㺂僒鳹霋⡎Windows♴崹錢㐼♶⠔⢪欽Web font⚥涸Bitmap Glyphկ
  10. 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
  11. 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/
  12. 28.

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

    numbers, and other character classes in Japanese type. https://github.com/houkanshan/mojikumi
  13. 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'
  14. 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
  15. 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
  16. 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
  17. 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
  18. 45.
  19. 51.

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

    PNG Simple graphics Complex graphics Hints + hint
  20. 53.

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

    Web Fonts Loading Timeout http://jsbin.com/yujahaquro/7
  21. 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
  22. 57.

    U+FFFD U+FFFD scrollWidth = 100px scrollLeft = 99px offsetWidth =

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