[CSS]CSS 字体属性
文章目录
- 1 字体系列
- 2 字体大小
- 3 字体粗细
- 4 文字样式
- 5 字体复合属性
- 6 字体属性总结
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)
1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。可以设置一种或多种字体。
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
<!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>
h1 {
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1>字体系列 font-family</h1>
</body>
</html>
font-family: ‘Courier New’, Courier, monospace;
电脑浏览器中有 ‘Courier New’ 字体就使用该字体,没有则使用 Courier ,再没有使用 monospace,都没有就是要电脑浏览器默认的字体
2 字体大小
CSS 使用 font-size 属性定义字体大小
<!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>
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>字体大小</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给 body 指定整个页面文字的大小
<!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: 20px;
}
</style>
</head>
<body>
<h1>字体大小</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>
会发现通过给body设置字体大小来设置整个页面的字体大小,h1 的字体大小并没有发生改变
标题标签比较特殊,需要单独指定文字大小
<style>
body {
font-size: 20px;
}
h1 {
font-size: 20px;
}
</style>
3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
font-weight 的取值:
- normal:文字正常粗细
- bold:文字加粗
- bolder:文字特粗(效果不是很明显)
- lighter:文字细体(效果不是很明显)
- 数值:100、200、300、400(等价于normal)、500、600、700(等价于bold)、800、900
400 以下细体,700以上特粗。
默认值:normal
注意:
- 数值后面不要带单位
- 实际开发时,我们更喜欢用数字表示粗细
<!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>
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
.lighter {
font-weight: lighter;
}
.one {
font-weight: 100;
}
.two {
font-weight: 200;
}
.three {
font-weight: 300;
}
.four {
font-weight: 400;
}
.five {
font-weight: 500;
}
.six {
font-weight: 600;
}
.seven {
font-weight: 700;
}
.eight {
font-weight: 800;
}
.nine {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">文字正常粗细</p>
<p class="bold">文字加粗</p>
<p class="bolder">文字特细</p>
<p class="lighter">文字细体</p>
<p class="one">文字 100</p>
<p class="two">文字 200</p>
<p class="three">文字 300</p>
<p class="four">文字 400</p>
<p class="five">文字 500</p>
<p class="six">文字 600</p>
<p class="seven">文字 700</p>
<p class="eight">文字 800</p>
<p class="nine">文字 900</p>
</body>
</html>
把本来加粗的文本设置为正常出细
<h1 class="h1-normal">文章标题</h1>
<h1>文章标题-未加粗</h1>
.h1-normal {
font-weight: normal;
/* 或 */
/* font-weight: 400; */
}
4 文字样式
CSS 使用 font-style 属性设置文本的风格。
font-style取值:
- normal: 文本字体样式为正常的字体。
- italic: 文本字体样式为斜体。
默认值:normal
<body>
<p class="normal">正常样式的字体</p>
<p class="italic">斜体样式的字体</p>
</body>
<style>
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
</style>
注意:
平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
<em class="normal">倾斜的文本改为正常样式的字体</em>
<i class="normal">倾斜的文本改为正常样式的字体</i>
.normal {
font-style: normal;
}
5 字体复合属性
字体属性可以把以上文字样式综合来写, 这样可以更节约代码(行数更少)
使用 font 属性可以把以上文字样式综合来写
使用 font 属性时,必须按语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
font: font-style font-weight font-size/line-height font-family;
- font-style:文字样式
- font-weight:文字粗细
font-size:文字大小
- line-height:文字行高
font-family:文字字体
其中,不想设置的属性可以省略不写,但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
<body>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quas magni molestias molestiae praesentium quo dolor ullam odio nulla! Dicta quos asperiores ducimus eligendi doloremque fugiat dolorum aperiam earum nulla?</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet quam quod porro in consequuntur at fugiat debitis, consequatur dolores facere! Quia aliquam recusandae tenetur, quam natus libero quaerat impedit rerum?</p>
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem animi sunt fuga enim temporibus tempore, optio unde quos eligendi. Laboriosam, maxime consequuntur dolore non itaque officiis maiores magnam rerum voluptatibus.</span>
</body>
<style>
div {
font: italic 700 20px '微软雅黑';
}
p {
font: italic 700;
}
h4 {
font: italic 20px 700 '微软雅黑';
}
</style>