一、定义
CSS Fonts (字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
二、字体系列
1、CSS 使用 font family属性定义文本的字体系列
2、举例:
p { font-family: 'Microsort YaHei/微软雅黑'; }
p { font-family: 'Courier New', Courier, monospace; }
/* 字体可以写中文也可以写英文,但我们更提倡英文的写法,兼容性更好 */
3、语法注意点
(1)、各种字体之间必须使用英文状态下的逗号隔开;
(2)、一般情况下,如果有空格隔开的多个单词组成的字体,加引号(单引号、双引号都可);
(3)、尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示;
(4)、最常用的几个字体:body{ font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; };
三、字体大小
1、CSS 使用 font-size 属性定义字体大小。
2、语法:
p { font-size: 20px; }
body { font-size: 18px; }
3、注意点
(1)、标题标签比较特殊,需要单独指定文字大小;
(2)、px(像素)大小是我们网页的最常用的单位;
(3)、谷歌浏览器默认的文字大小为16px;
(4)、不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不用默认大小;
(5)、可以给body指定整个页面字体的大小;
四、字体粗细
1、CSS 使用 font-weight 属性设置文本字体的粗细
2、语法:
p { font-weight: bold; }
3、常用属性值:
(1)、normal——默认值(不加粗的);
(2)、bold——定义粗体(加粗的);
(3)、100-900——400等同于normal,而700等同于bold,注意这个数字后面不跟单位;
4、注意点
(1)、学会让加粗标签(比如h和strong等)不加粗,或者其他标签加粗;
(2)、实际开发时,我们更喜欢用数字表示粗细;
五、文字样式
1、CSS使用font-style属性设置文本的风格
2、语法:
em { font-style: normal; }
3、属性值
(1)、normal——默认值,浏览器会显示标准的字体样式 font-style: normal;
(2)、italic——浏览器会显示斜体的字体样式;
4、注意点
平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜的字体。
六、字体复合属性
1、字体属性可以把以上文字样式综合来写,可以节约代码
2、语法:
/* 字体的复合属性 */
p {
/* font-style: italic;
font-weight: 700;
font-size: 700;
font-family: 'Microsoft YaHei'; */
/* 复合属性:简写的方式,节约代码 */
/* font: font-style font-weight font-size/font-height font-family; */
/* font: italic 700 16px 'Microsoft yahei'; */
font: 20px '黑体';
}
body{ font: font-style font-weight font-size/font-height font-family; }
3、注意点:
(1)、使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开;
(2)、不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用;
七、总结