当前位置：首页 > news >正文

【CSS入门】第五课 - font字体

news 文章来源：https://blog.csdn.net/xingyu_qie/article/details/141061150 2025/5/17 20:46:07

这一节，我们说一说font这个字体。做网页开发，网页中几乎不可能没有文字的，为了使网页更漂亮，用户体验更好。人们可算是绞尽脑汁，其中一部分就是在字体上下的大功夫。

接下来，我们学习一下，font字体在css中的设置

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>

我们就写了一个标签，什么样式也没有。那么我们看一下，他的大小，色值，和字体都是什么样子的呢？

想要测试这3种属性值，我们对应着添加一些属性看看不就可以了，对吧。

其实你可以自己测试一下，

文字大小默认是16px；
色值是黑色，色值是 #000；
默认字体是 Microsoft YaHei

也就是这样：

.box {font-size: 16px;font-family: Microsoft YaHei;color: #000;
}

你可以试着改变一下这些属性值，然后再修改回来，然后再删掉，如果你是windows电脑，应该就是这样子的。

2 font-family

我们在做网站开发的时候，很多公司为了彰显企业文化，会自己设计一些字体，或者用一些免费的其他人设计出来的字体。

通过修改font-family的属性值，就可以使文字看上去，字体有所改变：

.box {font-size: 16px;font-family: "隶书";color: #000;
}

是不是不太一样了，你还可以试着从网上找找其他字体，或者从自己的电脑的word文档里，看看你电脑上安装的其他字体，看看效果。

2.1 为什么要设置字体？

既然不设置字体，网页也会有个默认的显示，那么为什么还要设置这个font-family呢？很多电脑，他的默认字体不定都是这个英文的微软雅黑，甚至如果你用了中文的“微软雅黑”，还会受到某公司的侵权投诉，这个中文版的是有版权的，不能乱用。

而且，你看很多人的手机字体，还是非主流那种的，或者各种各样的，所以，需要设置一个默认字体，使其生效。这样，网站就会无论在哪种机型环境下，字体都显示的风格统一了。

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的大小，对吧。这个像素呢，是根据我们屏幕宽度来设定的，比如之前，人们的屏幕分辨率是 1024 * 768，那么我们设置一个文字的大小如果是100px，那差不多就是占十分之一个屏幕的宽度了，这个时候，一行也就是放10个字就占满了。

那么现在很多人屏幕是1920的宽度，那如果设置以为100px的文字，那可能就可以放19个才能占满一行了。

5.2 vw

vw呢，是一个相对于浏览器宽度的相对大小设置。什么是相对大小呢，就是我们的浏览器宽度大一些，1vw就大一些，浏览器宽度小一些，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%；什么是根元素？就是html标签。
然后我们日常开发的标签们，默认不是16px嘛，这里的1.6rem就是16px大小了。你可以拿着这段代码，去自己的电脑上试一下。
如果需要设置为24px，那么就直接写2.4rem就可以了。

那么如何达到响应式的呢？这说白了不还是多少多少像素嘛？

可以检测浏览器的宽度嘛，我们默认一个浏览器宽度，比如移动端开发的时候，默认成750的宽度，你的屏幕如果检测到大于750，直接把这个html标签的这个百分比调整了，整体的字体不就改变了。

当然，这涉及到后面的JS相关知识，我们也是先了解一下。不过你可以提前先给html标签的这个百分比改一下，看看效果。给后面的JS学习打个基础。

6 最后

我们这一节，说了font这个字体的一些设置，后面呢说了3种常用的设置字体大小的方式。其实字体大小还有其他的设置，不过你先掌握了这3种，几乎就可以应对90%的工作了。

而且如果这3种熟练了，自学其他的em啦，%（百分比）啦，rpx啦，就手到擒来了。

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 最后

相关文章：