css字体处理中最复杂的部分是字体系列的匹配和字体加粗的匹配,其次是字体大小的计算。
字体系列
我们大多数人以为字体就是某一种字体,实际可能是一个字体系列。常见的字体系列有Times,Serif,Sans-serif等
有时候我们指定了某种特定字体,但是不可用,可能显示为用户代理的默认字体
只有当一个字体名中有一个或多个空格(如New York),或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号。
h2{
font-family: Wedgie, "Karrank%", Klingon;
}
通用字体系列名在指示具体的通用系列时不能加引号。
字体加粗 font-weight
值:normal(默认值) bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit
100-900:为字体指定了9级加粗度。实际上,这些数字本身并没有固定的加粗度。 其中400 等同于 normal,而 700 等同于 bold。其他数不对应于font-weight中的任何值。
字体大小 font-size
值:xx-small x-small small medium(默认值) large x-large xx-large smaller larger <
length>
<
precentage>
inherit
绝对大小:font-size有7个绝对大小值xx-small x-small small medium large x-large xx-large。根据css1规范,一个绝对大小与下一个绝对大小之间的差别(或缩放因子)应当是向上1.5,或向下0.66。实际不一定如此。
相对大小: smaller larger这两个关键字使元素的大小相对其父元素的大小在绝对大小梯度上上移或下移,在此计算时会使用计算绝对大小时采用的缩放因子
百分数和大小
百分数值总是依据从父元素继承的大小计算。
字体大小和继承
css中font-size是可继承的,但是继承的是计算值而不是百分数。
有风格的字体 font-style
值:normal(默认值) italic oblique
normal:指‘竖直’的文本
italic:单独的字体风格,对每个字母结构有一些小改动,来反映变化的外观
oblique:是正常竖直文本的一个倾斜版本。
字体变形 font-variant
值:small-caps(默认值) normal inherit
small-caps 要求使用小型大写字母文本。小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
只要文本源中出现大写字母,会显示一个更大的大写字母,只要文本源中出现小写字母,会显示一个小型的大写字母。
拉伸和调整字体 font-stretch font-size-adjust
所有浏览器都不支持这两个属性。
font-stretch 属性可对当前的 font-family 进行伸缩变形。
font-size-adjust允许创作人员的首选字体不可用时,对替换字体进行智能缩放。
font属性 font
值: font-style font-variant font-weight font-size/line-heigh font-family caption icon menu message-box small-caption status-bar inherit
font属性是涵盖所有其他字体属性的一个简写属性。
其中:
caption 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致。