第五章 字体
1.字体系列
字体系列
Serif
Sans-serif
Monospace
Cursive
Fantasy
使用通用字体系列
指定字体系列
当一个字体名中有空格,或者字体名包括“#”之类的符号,才需要在font-family声明中加引号。
通用字体系列名在指示具体的通用系列是就不能加引号。
2.字体加粗
font-weight
400对应normal
700对应bold
3.字体大小
font-size
其作用是为给定字体的em框提供一个大小,而不能保证实际显示的字符就是这种大小。
绝对大小
相对大小
百分数与大小
百分数值总是根据从父元素继承的大小来计算。
4.字体大小与继承
font-size是可以继承的,不过继承的是计算值而非百分数。
也可以使用长度值来设置font-size(但是有兼容性问题),其他方法(如关键字和百分数)都更为用户友好。
5.风格和变形
有风格的字体
font-style:
normal/italic/oblique/inherit
(italic)斜体是一种单独的字体风格,对每个字母的结构有一点小改动。
(oblique)倾斜则是正常竖直文本的一个倾斜版本。
字体变形
font-variant:
normal/small-caps/inherit
small-caps:小型大写字母
6.拉伸和调整字体
font-stretch
font-size-adjust
7.font属性
规则
*font-style,font-weight,font-variant可以按任何顺序来写,如果其中某个属性的值为normal,则可以忽略。
*font-size,font-family不仅要按此顺序作为声明中的最后两个值,而且font声明中必须有这两个值。
增加行高
这个line-height值是可选的,且一定要在font-size后,总要一个斜线分隔。
适当使用简写
简写font属性时,所有被忽略的值都会重置为其默认值。
使用系统字体
其只能整体设置。
8.字体匹配
第六章 文本属性
1.缩进与水平对齐
缩进文本
*一般,可以为块级元素应用text-indent,而无法将这个属性应用到行内元素,图像之类的替换元素上也无法应用此属性。如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
*还可以设置为负值,实现“悬挂缩进”效果。
*这个属性可以继承。
水平对齐
text-align(只应用于块级元素)
2.垂直对齐
行高
line-height属性是指文本行基线之间的距离,而非字体的大小。
①构造文本行
②指定line-height值
em,ex和百分数值都是相对于元素的font-size值计算。
③行高和继承
line-height值从父元素继承时,要从父元素计算,而不是在子元素上计算。
举例:
垂直对齐文本
vertical-align属性只应用与行内元素和替换元素,如图像和表单输入元素,且不能继承。
*vertical-align不影响块级元素中内容的对齐,但是可以用它来影响表单元格中元素的的垂直对齐。
①基线对齐
vertical-align:baseline要求一个元素的基线与其父元素的基线对齐。
②上标和下标
vertical-align:sub
vertical-align:super
这两个值不改变元素的字体大小。
③底端对齐
vertical-align:bottom将元素行内框的底端与行框的底端对齐。
vertical-align:text-bottom是指行内文本的底端。
④顶端对齐
vertical-align:top
vertical-align:text-top
⑤居中对齐
⑥百分数
若为vertical-align设置一个百分数,会把元素的基线(或替换元素的底边)相对于父元素的基线升高或降低指定的量(你指定的百分数要计算为该元素line-height的百分数,而不是相对于其父元素的line-height)
⑦长度对齐
例如 vertical-align:5px;会把一个元素与对齐前相比上升5像素。并且所有垂直对齐的元素都会影响行高。
行框描述:其高度要足以包括最高行内框的顶端和最低行内框的底端,这也包括因垂直对齐上升或下降的行内框。
3.字间隔和字母间隔
字间隔
word-spacing(正负值均可,可继承)
字母间隔
letter-spacing(正负值均可,可继承)
间隔和对齐
4.文本转换
text-transform
5.文本装饰
text-decoration
怪异的装饰
改变装饰颜色的另一种方法(合乎规范)
6.文本阴影
text-shadow
(CSS2.1中没有)
7.处理空白符
8.文本方向