[CSS介绍]第五课
发布时间：2025-06-24 16:47:50 作者：北方职教升学中心 阅读量：605
这一节，让我们谈谈font字体。做网页开发网页上几乎不可能没有文字，为了使网页更漂亮�更好的用户体验。人们绞尽脑汁，其中一部分是字体上的大功夫。
接下来，让我们学习，在css中设置font字体。
目录。
1 浏览器默认字体是什么样的？
2 font-family。
2.1 为什么要设置字体？
3 font-style。
4 font-weight。
5 字体大小 font-size。
5.1 px。
5.2 vw。
5.3 rem。
6 最后。
1 浏览器默认字体是什么样的？
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我的第一页</title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> </head> <body> <div class="box">让我们学习字体</div> </body></html>我们写了一个标签，没有风格。让我们来看看他的大小，色值，和字体是什么样子的？
要测试这三个属性值我们只需要添加一些属性来查看，对吧。
事实上，你可以自己测试，
- 默认文本大小为16px；
- 色值是 黑色，色值是 #000；
- 默认字体是 。事实上，你可以自己测试，默认文本大小为16px；色值是 黑色，色值是 #000；
默认字体是 。
Microsoft。。
YaHei。
也就是这样：
.box { font-size: 16px; font-family: Microsoft YaHei; color: #000;}。
您可以尝试改变这些属性值，然后修改回来，然后删除如果你是windows电脑，c;应该是这样的。
2 font-family。
我们在做网站开发的时候，许多公司为了突出企业文化�会自己设计一些字体，或者使用其他人免费设计的字体。
font-family的属性值通过修改#xff0c;可以让文字看起来，字体发生了变化：
.box { font-size: 16px; font-family: "隶书"; color: #000;}。
不是很不一样吗，您还可以尝试在互联网上找到其他字体，或者从自己电脑的word文档，看看你电脑上安装的其他字体，看看效果。
2.1 为什么要设置字体？
由于不设置字体网页也会有默认显示，那么为什么要设置这个font-family呢？f;很多电脑�他的默认字体不一定是这样的 微软雅黑英语#xff0c;即使你用中文的“微软雅黑”，还会有一家公司的侵权投诉，这个中文版有版权，不能乱用。
而且，你看很多人的手机字体，还是非主流，或各种，所以，需要设置默认字体，使其生效。 而且，你看很多人的手机字体，还是非主流，或各种，所以，需要设置默认字体，使其生效。这样，无论在什么样的机型环境下，网站都会，字体显示的风格是统一的。3 font-style。设置font-style，能使字体倾斜，就像我们之前说的 i 标签一样。
.box { font-size: 16px; font-family: Microsoft YaHei; color: #000; font-style: italic; }。
倾斜是使用 font-style:。italic。 ; 设置，默认不倾斜的属性值是 。
normal。4 font-weight。
font-weight是为了设置文本的厚度。例如，您可以将属性值设置为：
300 400 600 normal bold lighter。
等，就像这样
.box { font-size: 16px; font-family: Microsoft YaHei; color: #000; font-style: italic; font-weight: bold;}。
5 字体大小 font-size。5.1 px。font-size ，我们刚才说默认是16px大小，对吧。这个像素，是根据我们的屏幕宽度设置的c;比如之前�屏幕分辨率是 1024 * 768，如果是100px，我们将设置一个文本的大小c;那几乎就是占领 十分之一 一个屏幕的宽度，此时�一行就是放10个字就占满了。所以现在很多人的屏幕是1920宽度，如果设置100px文本，也许可以放19个才能占满一行。所以现在很多人的屏幕是1920宽度，如果设置100px文本，可以放19个才能占满一行。
5.2 vw。
vw呢，是相对的。浏览器宽度。
相对尺寸的设置。什么是。
相对。大小，我们的浏览器宽度更大，1vw更大，浏览器宽度较小，#xff0c;1vw只是想写小写。
您可以这样设置：
.box { font-size: 2vw; font-family: Microsoft YaHei; color: #000;}。
- 然后你可以试着缩放浏览器让浏览器更宽，后者缩小了，尝试改变文本大小的效果。
- 5.3 rem。
- rem，其实并不是一个相对的单位，但是我们可以做一个自适应的可变相对单位。
。如何理解？我们先来看看他是怎么用的。html { font-size: 62.5%;}.box { font-size: 1.6rem; font-family: Microsoft YaHei; color: #000;}。
使用方法，为根元素设置font-size: 62.5%；什么是根元素？f;是html标签。
然后是我们日常开发的标签，默认不是16px，这里的1.6rem是16px大小。您可以使用此代码，试试你自己的电脑。 。
24px需要设置c;然后直接写2.4rem。
那么如何实现响应式ñ呢？f;说白了，还是有多少像素。
？
。可以检测浏览器的宽度，我们默许浏览器宽度，例如，在开发移动终端时，默认为750宽度，如果你的屏幕检测到超过750，直接调整html标签的百分比，字体的整体不会改变。当然，这涉及到JS相关知识，让我们先了解一下。但是，您可以提前更改html标签的百分比，看看效果。为以后的JS学习打下基础。6 最后。我们这一节说到font字体的一些设置，后来说了三种常用的设置字体大小的方法。其实字体大小还有其他设置，但是你首先掌握了这三种，几乎可以处理90%的工作。而且如果这三种熟练，自学其他em，%（#xff09百分比;#xff0c;rpx#xff0c;手到擒来。