font_align by 道璘

你幸福吗？你还在被字体大小、偏移、行高等因素困扰么？道璘帮你解决这些因素带给你的所有困扰~~

Transcript

1. Font & Align 道璘 2012-10-25
2. font
3. 测试代码
4. 测试环境 12px/12px 12px/18px Chrome ? ? IE8 ? ? IE7 ? ? IE6 ? ? … 测试环境: XP / 宋体
5. font:12px/12px in chrome 纯文字只有11x11的像素大小 居于左上角 11px 11px
6. font: 12px/12px IE8 纯文字大小丌变 整体向上偏移一像素 11px
7. font: 12px in IE6/7 因zoom: 1, 被截掉了一行像素 其实, 文字的高度是14px 11px
8. Font: 12px/? (chrome)  12px, 上0下1  13px, 上0下2  14px, 上1下2  15px, 上1下3  16px, 上2下3  17px, 上2下4  18px, 上3下4  剩余, 上下对半分
9. line-height: 18px IE会向上偏移一个像素, 上2下5 IE下按照14px文字高度算, 也是对半分 chrome IE6.7.8
10. font: 1?px/1 Chrome vs IE8 IE8, 文字均比chrome向上了一个像素 12px 13px 14px 15px 16px
11. 中英文混合  英文会使用到最后一行空白像素
12. 下划线 chrome IE8 IE6/7
13. Win7 font: 12px/12px Chrome/ IE9 ie8 Ie7 12px 12px 11px  Win7下, 宋体占用 11x12 的空间了
14. Win7 链接 chrome ie9 ie8 ie7 12px 12px 12px 13px
15. 166种字体 12px chrome
16. 其它 粗体在任何字号下, 都会增加1像素宽度 斜体丌改变宽高, 但overflow:hidden会隐藏 阴影丌改变宽高 mac, opera表现如何, 感兴趣可研究下~~
17. align
18. 对齐  vertical-align:  <number>px (像素级调整)  text-top/text-bottom (相对于parent.font)  top/bottom (自适应定位)
19. 文字不图片的对齐 一句话: 图片的baseline, 是图片的下沿边 baseline
20. 各种对齐
21. line-height:normal  字体不同, 默认行高不同  宋体默认行高: 1.14  微软雅黑: 1.31  Tahoma: 1.21 (w3c) normal: The user agent may allow the <number> to vary depending on the metrics of the font(s) being used
22. line-height:normal  行框line-height = max(all inline.line-height)  文字调整默认line-height后, 则按调整后的line- height计算  line-height只作用于inline元素
23. 追加至父容器  单个文字 -> 字体属性 -> 生成单个文字  文字块 -> 各种对齐 -> 单行 -> 大块  块 -> 流布局 -> 各种定位 -> 文档
24. 总结 复杂: 简单的组合 从简单开始, 逐步突破 从简单开始, 寻找解决复杂问题的规律
26. 块渲染
27. 渲染顺序  块渲染顺序  背景色  背景图  border  children  outline
28. 行内格式化上下文( Inline formatting context ) 框( boxes)一个一个的水平排列  行框的宽度由它的包含块和其中的浮动元素决定  高度的确定由行高度计算规则决定。
29. 渲染行  流布局  逐行渲染  行内元素对齐  对齐后调整宽高  宽高对齐溢出  生成每一行  块之间调整层级  生成在页面上
30. 渲染页面  渲染顺序  DOM改变  背景变化  宽度调整  字号改变  整体挪位置
31. DIV的渲染  div框内的渲染会被 干扰  div丌是一个独立渲 染单位
32. 块格式化上下文 ( Block formatting context ) 浮动元素 绝对定位元素 行内块元素 单元格 表格标题元素 overflow 非 "visible"的元素
33. 块格式化上下文 ( Block formatting context ) 它与普通的块框类似，不同之处在于 可以包含浮动元素 可以阻止外边距折叠 可以防止元素被浮动元素覆盖  在 CSS3 中，对块格式化上下文这个概念做了改动 ，将 "Block formatting context" 叫做 "flow root"。
35. 后面的PPT, 都是用于备份的
36. 选择 当浏览器选中某个单词时 或者, CTRL+F搜索选中时 chrome IE
37. example
38. 对齐的需求
39. Icon + text 18px 19px 18px
40. 小结一下 浏览器在渲染文字时, 区别较大 区别源于 underline造成的行高丌一致
41. align
42. 各种对齐 chrome ie8 ie7 ie6
43. 各种对齐
44. 各种对齐 当line-height大于1时呢
45. baseline