说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。

作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。荣誉：度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。🏆 白宝书系列 🏅 Python全栈白宝书🏅 产品思维训练白宝书🏅 全域运营实战白宝书🏅 大前端全栈架构白宝书

文章目录

在上一章节，我们学到了一些常用的文本样式属性，例如文本颜色、大小、加粗、倾斜、下划线等，没有介绍文本的字体属性。字体要介绍的内容较多，单独开一篇出来讲。

⭐️ 字体属性详解

接下来就进入到 "字体属性" 的学些内容吧

🌟 font-family属性

font-famile属性用来设置字体。字体可以是列表形式，一般英语字体放到前面，后面的是前面的“后备”字体。

注意：字体名称中有空格或者是中文字体，必须用引号包裹。

font-family: serif, "Times New Roman", "微软雅黑";

使用列表形式一般为了应对下面两种情况：

网页中包含多种语言，一种字体无法满足。（比如英文字体无法应用到中文字符上） 如果前面的字体用户没有安装，就会使用后面的"后备"字体。

问：为什么要将英文字体放到前面？答：如果将中文字体放到前面，英文字体放在后边，如果文本中出现英文，会优先使用中文字体包中的英文字符字体显示，不会应用到后面的英文字体。

PS：中文字体也可以称呼它们的英文名字，例如微软雅黑的英文名为"Microsoft Yahei"。

🌟 自定义字体

font-family属性指定的字体必须是用户计算机中已经安装好的字体，如果你设置的字体是个不常用的字体，用户电脑中很可能没有安装，那么用户在浏览网页中字体会显示异常。所以一般设置为微软雅黑和宋体较多。

如果想用自己的字体，需要自己定义一个字体。

自定义字体需要两步：

增加字体文件（当用户加载网页的时候，会同时自动下载字体文件）；用@font-face定义字体

1.字体文件

字体文件根据操作系统和浏览器的不同，有eot、woff2、woff、ttf、svg五种文件格式，定义一个字体需要同时有这五种文件。

那么从哪里弄到字体文件呢？可以在网上找一些免费的资源（土豪随意），例如网站 / 上就有一些免费的字体库。

登录网站->选择喜欢的字体->把字体文件下载下来，这样我们就拥有这个字体的字体文件

2.用@font-face定义字体

当我们拥有字体文件后，就可以用@font-face定义字体

font-face的语法：

@font-face {font-family: "我的自定义字体";font-weight: 400;src: url("woff2的地址") format("woff2"), url("woff的地址") format("woff");font-display: swap;}

@font-face的语法不需要记，使用的时候百度一搜就可以了。

到这里字体就自定义好了，那么如何应用自定义字体？

答：直接用font-family: "我的自定义字体"来指定字体为自定义的字体就可以了

自定义字体小实例

第一步，在 / 上选择一个字体，书写一些文字(只有这些文字才能变成这个字体)，点击代码引用，然后复制@font-face的内容

第二步，将复制的@font-face粘帖到我们的代码中

第三步，使用font-family引用这个字体，效果如下图：

为什么下面的一行没有应用到这个字体呢？因为在 / 网站中只书写了“超酷的哈士奇”这五个字，字体文件没有生成其他字符的字体，所以其他字是没办法应用这个字体的。

PS：除了这种直接引用的方法，我们也可以把字体文件下载下来，然后放到项目文件夹中，将@font-face中的url修改为字体文件的相对路径。