《使用HTML5实现响应式布局》第六章-文字特效-理论学习资料.pptxVIP

第六章文字特效

理论内容

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