《使用HTML5实现响应式布局》第六章-文字特效-理论学习资料.pptx
第六章文字特效
理论内容
CSS3的文字属性
CSS3的文本属性
1.CSS3的文字属性
CSS3的文字属性主要包括
设置字体
字体大小
字体风格
字体粗细
字体复合属性
设置字体
字体属性font-family在CSS3中可以设置文字字体，用于改变HTML5标签的字体
font-family：[字体名称]
如果在font-family属性中定义了不只一个字体，那么浏览器会由前向后选用字体
如果计算机没有安装font-family定义的字体，浏览器会选用系统默认的字体显示
设置字体
style
h2{
font-family:华文彩云,黑体;
}
.text{
font-family:宋体;
}
/style
如果不能显示华文彩云字体，则显示黑体
华文彩云字体
设置字号
字号属性font-size用于修改字体显示的大小
font-size：绝对大小|相对大小|长度值|百分比
参数
说明
绝对大小
字号从小到大的取值依次是：xx-small、x-small、small、medium、x-large、xx-large
相对大小
相对于父对象中字体尺寸相对调节。使用成比例的em单位计算
长度值
由浮点数字和单位标识符组成的长度值，使用的单位可以为pt（点，1点=1/72英寸）、px（像素）、in（英寸）等，其中浮点数字不能为负值
百分比
取值基于父对象中的字体尺寸
设置字号
style
h2{
font-family:华文彩云,黑体;
font-size:12pt;
}
.text{
font-family:宋体;
font-size:12px;
}
/style
字体风格
设置字体风格（字体样式）的CSS3属性是font-style
font-style：normal|italic|oblique
参数
说明
normal
以正常的方式显示
italic
以斜体显示文字
oblique
属于其中间状态，以偏移体显示
字体风格
style
h2{
font-family:华文彩云,黑体;
font-size:12pt;
font-style:italic;
}
.text{
font-family:宋体;
font-size:12px;
font-style:oblique;
}
/style
斜体
偏斜体
字体粗细
font-weight属性用于设置字体的粗细，实现对一些字体的显示
font-weight：normal|bold|bolder|lighter|number
参数
说明
normal
表示正常粗细
bold
表示粗体
bolder
表示特粗体，即在粗体的基础上再粗
lighter
表示特细体，即比正常字体细
number
数值类型，其范围为100～900，而且一般情况下都是整百的数字，如100、200等。正常字体类似于数值400的粗细；粗体则类似于700的粗细
字体粗细
style
h2{
font-family:华文彩云,黑体;
font-size:12pt;
font-weight:bolder;
}
.text{
font-family:宋体;
font-size:12px;
font-weight:200;
}
/style
特粗体
字体复合属性
font属性是复合属性，以缩写的方式综合设置文字样式。如设置段落为宋体斜体字，字号为12点，行高18点，写法为
p{
font:italicbold12pt/18pt宋体;
}
字体复合属性
style
h2{
font:bolderitalic14pt黑体;
}
.text{
font:20010pt/14pt宋体;
}
/style
14点黑体粗斜体字
10点字号，行高14点的宋体偏细字
2.文本属性
在CSS3中，文本属性主要包括
单词间隔
字符间隔
文字修饰
纵向排列
文本转换
文本排列
文本空格
行高
处理空白
文本反排
单词间隔
单词间隔属性word-spacing用于定义附加在单词之间的间隔的数量
其取值必须符合长度格式
单词间隔的设置多用于英文文本中
word-spacing:normal|length
参数
说明
normal
指正常的间隔，是默认选项
length
设定单词间隔的数值及单位，可以使用负值
单词间隔
style
h2{
font-size:18pt;
word-spacing:8px;
}
.text{
font-size:12pt;
wo