3 CSS文字属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
3.1 文字系列
CSS使用font-family属性定义文本的字体系列。
p { font-family:"微软雅黑";}
div {font-family: Arial, "MicrosoftYahei","微软雅黑";}/*系统会先识别第一种字体,如果没有就下一个,有的话就使用第一种*/
一般写英文比较好,兼容性问题。
- 各种字体之间必须使用英文状况下的逗号隔开
- 一般情况下,如果又空格隔开的多个
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体: body { font-family. ‘Microsoft YaHei’,tahoma,arial,Hiragino Sans GB’;}
3.2 字体大小
CSS使用font-size属性定义字体大小。
p{
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给个明确值大小,不要默认大小
- 可以给body指定整个页面文字的大小
Note:标题标签比较特殊,需要单独指定文字
3.3 字体粗细
CSS使用font-weight属性设置文本字体的粗细
p{
font-weight: bold;
}
以前html中的strong可以加粗,在CSS中也可以使用bold加粗
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400等同于normal,而700等同于bold,注意这个数字后面不跟单位 |
- 学会让加粗标签(比如h和strong等)不加粗,或者其他标签加粗
- 实际开发中,更提倡使用数字 表示加粗或者变细
3.4 文字样式
之前html中使用的em标签
CSS使用font-style属性设置文本的风格。
P{
font-style: normal ;
}
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
注意:平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜字体。
以上字体系列,大小,粗细,样式归纳一起
09-CSS字体属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 16px; /*字体大小*/
}
h2 {
font-family: '微软雅黑';
font-size: 18px;
font-weight: 400;
font-style: italic; /*文字倾斜*/
}
em {
font-style: normal; /*让倾斜的字体不倾斜*/
}
p {
/* font-family: 'Microsoft YaHei',Arial, Helvetica; */
font-family: 'Times New Roman', Times, serif; /*系统会先识别第一种字体,如果没有就下一个,有的话就使用第一种*/
}
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,更提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
</style>
</head>
<body>
<h2>pink 的 秘密</h2>
<p>那是一抹众人中最漂亮的颜色</p>
<p>优雅,淡然,又那么心中清澈。</p>
<em>前端总是伴随着困难和犯错,</em>
<p>静心,坦然,攻克一个又一个。</p>
<p class="bold">拼死也要克服它,</p>
<p>这是pink 的秘密也是老师最终的嘱托</p>
</body>
</html>
网页显示:
3.5 字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font- size/line-height font-family; /*写的次序不能颠倒*/
}
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值) , 但必须保留font- size和font family属性,否则font属性将不起作用
eg:13-CSS字体属性之复合属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei'; */
/* 符合属性:简写的方式 节约代码 */
/* font: font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahei';
}
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>
网页显示:
3.6 字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700或者bold不加粗是normal或者400记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是italic不倾斜 是normal工作中我们最常用normal |
font | 字体连写 | 1.字体连写是有顺序的不能随意换位置2.其中字号和字体必须同时出现 |