周边知识点_html/css_WEB-ITnose
1em = 元素自身设定的或是父元素继承的font-size值
1left margin = 24px
2left margin = 18px
3left margin = 12px
1 h1{font-size:24px;}2 h2{font-size:18px;}3 p{font-size:12px;}4 h1,h2,p{margin-left:1em;}
font-weight
值100~900并没有固定的加粗度,一般与某个变形名等价,400对应normal,700对应bold,其他视关键字情况而定。
Times假想加粗指定
字体 | 指定关键字 | 指定数字 |
TimesRegular | normal | 100,200,300,400 |
TimesBold | bold | 500,600,700,800,900 |
bolder 根据父元素加粗
1 p{font-weight:normal;}/*400,更粗是bold对应700,其中最小值为700*/2 p em{font-weight:bolder;}/*700*/3 4 h1{font-weight:bold;}/*700,更粗假设没有关键字,则设置为下一个更大的数字,最大为900*/5 h1 b{font-weight:bolder;}/*800*/
font-size
无指定数字,初始值为medium。larger类似bolder根据父元素按缩放因子上移,但无绝对大小范围(900)限制。
百分比也是按照父元素继承的大小来计算。
这些继承是一级一级的,嵌套越里积累越多。
使用px则是给字体固定值,这样有个隐患即在IE6前用户无法调整文本大小,所以字体大小使用关键字和百分数会更好。
text-indent
文本缩进也会继承。
1
12 This is the first line.3This is the second line while this will also
4
get the text indent style.
line-height
1
124This is paragraph A which gets a line-height equals 12px.
357This is paragraph B which gets a line-height equals 14px.
68This is paragraph C which gets a line-height equals 18px.
9
vertical-align
默认值为baseline,与文字基线对齐(字母如"g",小尾巴在基线下方)。
text-bottom:与文字最底端那条线对齐(文字的“底部切线”,小尾巴最底端那条切线)。
bottom:行框最底部对齐(行高大于字体大小时,行高所占空间的最底部,小尾巴下方还有一定距离)。
百分数则是相对父元素的基线(行高)升高或者降低指定的量。
px:正值则上升,负值则下降。
注意vertical-align只能用于行内元素或者表单元格元素。
参考资料
《css权威指南》第4~6章
推荐阅读
-
wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose
-
谷歌字体(Google Font)初探 [翻译自Google官方文档]_html/css_WEB-ITnose
-
icon@font-face那些事_html/css_WEB-ITnose
-
@font-face字体加载不成功,求解!_html/css_WEB-ITnose
-
通过font-awesome案例来学习 css sprite和svg sprite_html/css_WEB-ITnose
-
如何在window Form中使用Font Awesome?_html/css_WEB-ITnose
-
如何在XHTML 1.0 Strict DTD中实现font元素的功能_html/css_WEB-ITnose
-
网页CSS样式属性:font字体常识_html/css_WEB-ITnose
-
CSS font关键字属性值的简单研究_html/css_WEB-ITnose
-
line-height和font-size的缩写形式_html/css_WEB-ITnose