【CSS入门】第五课 - font字体
经海路大白狗 2024-08-22 14:03:01 阅读 100
这一节，我们说一说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 浏览器默认字体是什么样的？
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />code>
</head>
<body>
<div class="box">我们来学习一下字体</div>code>
</body>
</html>
我们就写了一个标签，什么样式也没有。那么我们看一下，他的大小，色值，和字体都是什么样子的呢？
想要测试这3种属性值，我们对应着添加一些属性看看不就可以了，对吧。
其实你可以自己测试一下，
文字大小默认是16px；色值是 黑色，色值是 #000；默认字体是 Microsoft YaHei
也就是这样：
<code>.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 标签一样。
<code>.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 等，就像这样：
<code>.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啦，就手到擒来了。
上一篇： SpringBootWeb 篇-深入了解会话技术与会话跟踪三种技术（Cookie 会话跟踪、Session 会话跟踪与 JWT 令牌会话跟踪）
下一篇： 前端页面自动渲染AE动画方案
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。