HTML如何设置字体样式？font face属性的用法是什么？-html教程-PHP中文网

现代网页设计不再推荐使用<font face>属性，因为它违反了内容与样式分离的原则，导致维护困难、扩展性差、缺乏语义化且浏览器支持逐渐弱化；2. 使用css的font-family属性可实现更灵活的字体控制，通过定义字体栈和结合选择器集中管理样式，实现了样式与内容的解耦；3. 引入自定义字体的最佳实践包括使用@font-face规则定义字体、优先选择woff2格式、通过cdn或自托管加载、仅加载必要字重、进行字体子集化、合理设置font-display属性以优化加载体验，并确保字体授权合规。

HTML如何设置字体样式？font face属性的用法是什么？

在HTML中设置字体样式，最直接但已不推荐的方式是使用

font

登录后复制

标签的

face

登录后复制

属性。不过，现代网页开发更倾向于使用CSS的

font-family

登录后复制

属性，它提供了更灵活、更强大的字体控制能力，包括引入自定义字体。

解决方案

说实话，每次看到旧代码里还在用

<font>

登录后复制

标签，我都会忍不住叹口气。那玩意儿，确实能设置字体，比如你想把一段文字变成“微软雅黑”，可以直接这么写：

<p><font face="Microsoft YaHei">这段文字是微软雅黑。</font></p>

登录后复制

但这种做法，用行话讲，就是把“内容”和“样式”混在了一起。想象一下，你盖房子的时候，把墙壁的颜色直接画在结构图纸上，虽然也能实现，但将来想换个颜色，就得动图纸，多麻烦。网页也是一样，HTML是骨架，CSS才是皮肤。

立即学习“前端免费学习笔记（深入）”；

所以，现在我们设置字体，几乎都是用CSS。最常用的就是

font-family

登录后复制

属性。它可以写在HTML元素的

style

登录后复制

属性里（不推荐，但应急时有用），写在

<style>

登录后复制

标签里，或者最好的方式，写在一个独立的

.css

登录后复制

文件里。

比如，你想让所有段落都用“微软雅黑”，如果用户电脑没有，就退而求其次用“宋体”，再没有，就用系统默认的无衬线字体（sans-serif）：

p {
    font-family: "Microsoft YaHei", "SimSun", sans-serif;
}

登录后复制

或者，你想让某个特定的标题用一种很酷的字体，你可以给它一个类名，然后通过CSS来控制：

<h1 class="cool-title">我的酷炫标题</h1>

登录后复制

.cool-title {
    font-family: "Impact", fantasy; /* Impact是系统字体，fantasy是通用字体族 */
}

登录后复制

这比

font face

登录后复制

强大多了，不仅能指定多个备选字体，还能配合

font-size

登录后复制

、

font-weight

登录后复制

、

color

登录后复制

等属性，全方位地控制文字样式。

为什么现代网页设计不再推荐使用

<font face>

登录后复制

属性？

这其实是个老生常谈的问题了，但对于刚接触网页开发的同学来说，确实需要掰扯清楚。简单讲，

<font face>

登录后复制

属性，包括整个

<font>

登录后复制

标签，都是HTML4时代遗留下来的“历史包袱”。它被淘汰，主要有几个原因：

首先，是“关注点分离”的原则。HTML的本职工作是定义网页的结构和内容，比如哪些是标题，哪些是段落，哪些是图片。而样式（字体、颜色、布局等）应该由CSS来负责。当你在HTML里直接写

font face

登录后复制

时，你就把样式信息硬编码进了结构里。这就像我前面说的，把家具颜色写在房子的地基图纸上，虽然能用，但逻辑上就是错位了。

其次，是维护性和可扩展性问题。想象一下，你的网站有几百个页面，每个页面里都有几十处用

<font face="Arial">

登录后复制

来设置字体。有一天老板说：“我们品牌升级了，所有Arial字体都要换成Helvetica！”你怎么办？一个页面一个页面地改？那简直是噩梦。但如果用CSS，你只需要改一个CSS文件里的一行代码，所有页面的字体就都更新了。这效率上的差异，简直是天壤之别。

再者，是性能和语义化。HTML标签应该具有语义，告诉浏览器和搜索引擎它代表什么。

<p>

登录后复制

代表段落，

<h1>

登录后复制

代表一级标题。而

<font>

登录后复制

标签除了设置样式，没有任何语义上的意义。它增加了HTML文件的体积，却没带来任何结构上的信息。同时，它也限制了你对样式的精细控制，比如你想同时改变字重、行高、颜色，

font face

登录后复制

就无能为力了。

最后，浏览器对这种老旧属性的支持也越来越弱，或者说，它们更倾向于按照CSS的规则来渲染。所以，为了网站的长期健康发展，抛弃

<font face>

登录后复制

，拥抱CSS，是必然的选择。

如何使用CSS的

font-family

登录后复制

属性来设置字体？它和

<font face>

登录后复制

有什么本质区别？

CSS的

font-family

登录后复制

属性是目前设置字体样式的标准方法。它的用法比

font face

登录后复制

灵活得多，也更符合现代网页开发的最佳实践。

font-family

登录后复制

的语法是这样的：你可以提供一个或多个字体名称，用逗号隔开。浏览器会从左到右依次尝试这些字体。如果用户系统安装了第一个字体，就用第一个；如果没有，就尝试第二个，以此类推。直到找到一个可用的字体，或者最终使用浏览器默认的字体。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

登录后复制

这里，“Helvetica Neue”是首选字体，如果用户没有，就用Arial，如果还没有，就用任何系统提供的无衬线字体（sans-serif）。这种“备用字体链”机制，是

font-family

登录后复制

非常重要的一个特性，它保证了在用户设备上总能显示出可读的文字，同时尽可能地保留了设计意图。

font-family

登录后复制

和

font face

登录后复制

的本质区别在于它们的“管辖范围”和“设计理念”。

font face

登录后复制

是HTML的一个属性，它直接作用于单个HTML元素，是一种“内联式”的样式定义。它的设计理念是“所见即所得”，你直接在元素上指定样式。这种方式简单粗暴，但缺乏复用性和集中管理的能力。

font-family

登录后复制

是CSS的一个属性，它属于样式表的一部分。CSS的设计理念是“样式与内容分离”，它通过选择器（比如元素名、类名、ID等）来批量地、有条件地应用样式。这意味着你可以把所有字体样式定义集中在一个地方，然后让多个HTML元素引用这些样式。这种方式更抽象，但带来了极大的灵活性、可维护性和可扩展性。

说白了，

font face

登录后复制

是“硬编码”，直接把字体信息写死在HTML里；而

font-family

登录后复制

是“配置化”，通过CSS规则来统一管理字体，实现了样式和内容的解耦。这不仅仅是语法上的不同，更是两种完全不同的开发哲学。

引入自定义字体（Web Fonts）的最佳实践是什么？

@font-face

登录后复制

规则该如何应用？

有时候，系统自带的字体无法满足设计需求，设计师可能需要使用一些特别的字体来体现品牌特色或视觉风格。这时候，我们就需要引入“自定义字体”，也叫“Web Fonts”。这玩意儿，才是真正让网页设计摆脱系统字体限制的利器。

引入自定义字体，主要依赖CSS的

@font-face

登录后复制

规则。它允许你指定一个字体文件的路径，然后给这个字体起个名字，之后就可以像使用系统字体一样，在

font-family

登录后复制

里引用它了。

一个基本的

@font-face

登录后复制

规则是这样的：

@font-face {
    font-family: 'MyCustomFont'; /* 给字体起个名字 */
    src: url('fonts/my-custom-font.woff2') format('woff2'), /* 优先加载WOFF2格式 */
         url('fonts/my-custom-font.woff') format('woff');  /* 兼容性更好的WOFF格式 */
    font-weight: normal; /* 字体的粗细 */
    font-style: normal;  /* 字体的样式，比如斜体 */
    font-display: swap;  /* 字体加载策略 */
}

登录后复制

然后，你就可以在CSS里这样使用它：

h1 {
    font-family: 'MyCustomFont', sans-serif; /* 记得加上备用字体 */
}

登录后复制

关于最佳实践，我个人有一些心得：

字体格式的选择： 不同的浏览器支持的字体格式不同。现在最推荐的是
```
WOFF2
```
登录后复制
，它压缩率高，加载速度快，现代浏览器基本都支持。其次是
```
WOFF
```
登录后复制
，兼容性也不错。
```
TTF
```
登录后复制
（TrueType）和
```
OTF
```
登录后复制
（OpenType）是原始字体格式，文件通常较大。
```
EOT
```
登录后复制
（Embedded OpenType）是IE专用的，现在基本不用考虑了。
```
SVG
```
登录后复制
字体也逐渐被淘汰。所以，通常你至少需要
```
WOFF2
```
登录后复制
和
```
WOFF
```
登录后复制
两种格式，以确保广泛兼容性。
字体文件的来源：
- 自托管： 如果你购买了字体授权，或者使用了免费开源字体，可以将字体文件放在自己的服务器上。这样可以更好地控制加载过程，但需要处理好跨域问题（如果字体文件和网页不在同一个域名下）。
- 第三方服务： 像Google Fonts、Adobe Fonts等服务提供了大量的Web字体，并且通常有很好的CDN支持，加载速度快。它们会自动帮你处理
```
@font-face
```
  登录后复制
  规则和各种字体格式的兼容性，非常方便。但缺点是依赖第三方服务，且可能涉及隐私问题（字体服务商会记录用户IP等）。
性能优化：
- 只加载需要的字重和样式： 一个字体家族可能包含几十种字重（细体、粗体、黑体等）和样式（斜体、正常）。如果你只用到常规体和粗体，就不要把所有字重都加载进来，这会大大增加字体文件的大小。
- 字体子集化（subsetting）： 如果你的网站只使用中文字符，可以考虑对字体文件进行子集化，只包含常用汉字，这样能显著减小文件体积。不过这操作有点复杂，通常需要专门的工具。
- font-display
  登录后复制
  属性：这个属性非常重要，它控制了字体加载时的行为，可以避免“无样式文本闪烁”（FOUT - Flash of Unstyled Text）或“不可见文本闪烁”（FOIT - Flash of Invisible Text）的问题。
  - ```
  swap
```
  登录后复制
  ：在字体加载期间，先显示系统默认字体，加载完成后再替换为自定义字体。这是最常用的，体验比较好。
- ```
block
```
    登录后复制
    ：在字体加载期间，文本会先隐藏一段时间，直到字体加载完成才显示。可能导致空白。
  - ```
  fallback
```
  登录后复制
  ：类似于
```
  block
```
  登录后复制
  ，但等待时间更短，如果字体加载失败，会立即显示备用字体。
- ```
optional
```
    登录后复制
    ：字体加载优先级最低，如果网络不好，可能直接不加载自定义字体，始终显示备用字体。
- 预加载： 对于关键字体，可以使用
```
<link rel="preload" as="font" type="font/woff2" crossorigin>
```
  登录后复制
  标签来提前加载，提高用户体验。
字体授权： 使用任何自定义字体前，务必检查其授权协议。有些字体是免费商用的，有些则需要购买授权。避免侵权是基本原则。