CSS字体如何引入_CSS引入自定义字体方法教程

雪夜

发布时间：2025-09-13 22:37:01

435人浏览过

来源于php中文网

原创

答案是使用@font-face规则引入自定义字体，需关注格式兼容性、性能优化与版权问题。通过定义font-family和src指定字体文件，优先提供WOFF2与WOFF格式以兼顾性能与兼容；利用font-display: swap避免文本不可见，结合子集化、预加载和CDN提升加载速度；注意浏览器对EOT、TTF等旧格式的支持顺序；严格遵守字体许可协议，规避商业使用风险。

css字体如何引入_css引入自定义字体方法教程

在CSS中引入自定义字体，核心机制在于

@font-face

规则。它允许我们定义一个字体家族的名称，并指定其字体文件的位置，从而让浏览器能够加载并应用这些非系统自带的字体。这看似简单，但实际操作中，从选择字体格式到优化加载性能，再到处理兼容性问题，里面门道不少，远不止写几行CSS那么直白。

解决方案

要将自定义字体引入你的网页，你需要用到CSS的

@font-face

规则。这个规则就像是给浏览器下达指令：‘嘿，我这里有个新字体，它叫XXX，文件在这里，你应该这样加载它。’

最基本的结构是这样的：

@font-face {
  font-family: 'MyCustomFont'; /* 给你的字体起个名字，之后在CSS里就用这个名字 */
  src: url('fonts/mycustomfont.woff2') format('woff2'), /* 现代浏览器首选 */
       url('fonts/mycustomfont.woff') format('woff');   /* 广泛支持 */
  font-weight: normal; /* 字体的粗细，可以根据你的字体文件来设置 */
  font-style: normal;  /* 字体的样式，比如斜体 */
  font-display: swap; /* 推荐加上，优化字体加载用户体验 */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* 在需要的地方应用你的自定义字体 */
}

这里面有几个关键点：

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

font-family
: 这个名字是你自己定义的，它将作为你在其他CSS属性中引用这个字体的标识符。比如，你可以在
```
body
```
或任何元素上设置
```
font-family: 'MyCustomFont', sans-serif;
```
。
src
: 这是最重要的部分，它告诉浏览器去哪里找到字体文件。你可以提供多个
```
url()
```
，用逗号分隔。浏览器会按顺序尝试加载，直到找到一个它支持且能加载的文件。
- url()
  : 指向字体文件的路径。可以是相对路径，也可以是绝对路径。
- format()
  : 这是一个可选但强烈推荐的提示，它告诉浏览器这个URL指向的字体文件是什么格式。有了它，浏览器就能更快地决定是否需要下载这个文件，避免不必要的下载。比如
```
format('woff2')
```
  。

关于字体格式，这是个老生常谈但又不得不提的话题。现在主流且推荐的顺序是：

WOFF2 (Web Open Font Format 2.0): 压缩率最高，性能最好，现代浏览器首选。如果你的网站面向的用户群主要是新设备，这个是必不可少的。
WOFF (Web Open Font Format): 广泛支持，比TTF/OTF更适合Web。
TTF (TrueType Font) / OTF (OpenType Font): 桌面字体格式，文件通常较大，但兼容性不错，作为备用。
SVG (Scalable Vector Graphics Font): 曾经用于旧版iOS，现在基本淘汰。
EOT (Embedded OpenType): 微软IE的私有格式，现在也基本用不到了。

我的建议是，至少提供WOFF2和WOFF两种格式，这样能兼顾性能和兼容性。如果考虑到一些老旧的浏览器，TTF也可以作为备选加入。

src

列表的顺序很重要，把最好的、最新的格式放在前面，让现代浏览器优先加载性能更好的版本。

字体加载缓慢怎么办？优化自定义字体性能的策略

字体文件，尤其是那些包含了多种字重、字形的字体家族，体积往往不小。这在网络环境不佳时，很容易成为网页加载的瓶颈，导致用户看到页面时，要么是默认字体跳变（FOUC - Flash of Unstyled Content），要么是文字干脆不显示（FOIT - Flash of Invisible Text）。我以前也遇到过，页面内容都出来了，但文字却迟迟不出现，用户体验极差。

要解决这个问题，我们可以从几个方面入手：

```
font-display
```
属性: 这是CSS提供的一个非常强大的工具，它定义了字体在加载过程中和加载失败时的显示策略。
- ```
swap
```
  : 这是我个人最推荐的选项。它会立即使用系统字体显示文本，一旦自定义字体加载完成，就替换掉系统字体。这样用户至少能第一时间看到内容，虽然可能会有字体跳变，但总比看不到字要好。
- ```
fallback
```
  : 文本在短时间内不可见，如果字体在这段时间内加载完成，就显示自定义字体；否则，显示系统字体，并且一旦系统字体显示，即使自定义字体后续加载完成，也不会再替换。
- ```
optional
```
  : 类似
```
fallback
```
  ，但浏览器有更大的自由度决定是否加载字体，比如在网络不佳时可能直接放弃加载。
- ```
block
```
  : 文本会有一段较长时间的不可见，直到字体加载完成。这是最差的用户体验，尽量避免。
你可以在
```
@font-face
```
规则中这样添加：
```
font-display: swap;
```
。
字体子集化 (Subsetting): 如果你的网站只用到了字体中的一部分字符（比如只用到英文字母和数字，或者只用到某个特定的汉字集合），那么没必要加载整个字体文件。你可以使用一些工具（例如Font Squirrel的
```
@font-face
```
生成器，或者一些命令行工具如
```
fontTools
```
）来裁剪字体文件，只保留你需要的字符。这能显著减少字体文件的体积。
预加载 (Preload): 使用
```
<link rel="preload" as="font" crossorigin="anonymous" href="fonts/mycustomfont.woff2">
```
可以告诉浏览器，这个字体文件非常重要，请尽快下载。浏览器会在渲染页面之前就开始下载字体，从而减少字体加载的延迟。
```
crossorigin
```
属性是必须的，因为字体通常是从CDN或其他不同源加载的。

腾讯交互翻译
腾讯AI Lab发布的一款AI辅助翻译产品

下载
CDN加速: 将字体文件部署到CDN（内容分发网络）上。CDN能够将字体文件分发到离用户最近的服务器，从而加快下载速度。很多字体服务商，比如Google Fonts，本身就是基于CDN提供服务的。
异步加载: 对于一些非核心的字体，可以考虑在页面加载完成后再通过JavaScript动态加载，避免阻塞首屏渲染。但这会增加实现的复杂性，通常配合
```
font-display: swap
```
已经能解决大部分问题。

不同浏览器对字体格式支持不一致？跨平台兼容性解决方案

浏览器兼容性，这真是前端开发永远的痛，字体也不例外。虽然现在WOFF2和WOFF已经覆盖了绝大部分现代浏览器，但如果你需要支持一些老旧的IE浏览器，或者一些特殊的移动端浏览器，你可能就会发现，同样的代码在不同浏览器下表现不一样。我记得有一次，一个项目要求兼容到IE9，结果自定义字体在IE里就是出不来，最后排查发现是EOT格式没加，或者

src

里的顺序不对。

解决这种兼容性问题，核心在于

@font-face

规则的

src

属性。它的顺序至关重要。浏览器会从前往后尝试加载，直到找到它能识别并支持的格式。所以，我们通常会把最新、性能最好的格式放在最前面，然后依次是兼容性较好的、最后是为老旧浏览器准备的。

一个比较稳妥的

src

写法，通常会包含WOFF2、WOFF，甚至TTF/OTF作为备选：

@font-face {
  font-family: 'YourFontName';
  src: url('yourfont.woff2') format('woff2'), /* 现代浏览器，压缩率高 */
       url('yourfont.woff') format('woff'),   /* 广泛支持 */
       url('yourfont.ttf') format('truetype'); /* 旧版Android/iOS，以及一些桌面浏览器 */
       /* url('yourfont.eot?#iefix') format('embedded-opentype'); /* 如果需要支持IE6-IE8，但现在基本不用了 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

这里有个小细节，针对IE的EOT格式，通常会在URL后面加上

?#iefix

。这其实是一个hack，用来解决IE浏览器在某些情况下对EOT字体解析的问题。虽然现在EOT已经很少用了，但了解一下这个历史遗留问题也挺有意思的。

此外，

format()

提示符不仅仅是优化，在某些极端情况下，它也能帮助浏览器更准确地识别字体类型，避免因为文件扩展名不准确或服务器MIME类型配置错误导致的问题。尽管浏览器通常能通过文件头信息识别字体类型，但明确给出提示总归是更保险的做法。

所以，我的经验是，不要吝啬多提供几种格式。用工具生成

@font-face

代码时，它通常会给你一个非常全面的

src

列表。虽然你可能不需要所有格式，但保留WOFF2、WOFF和TTF/OTF，基本上就能覆盖99%的用户了。至于EOT和SVG，除非有明确的老旧浏览器兼容需求，否则可以大胆舍弃，减轻字体文件的负担。

如何处理字体版权和许可问题？自定义字体使用的法律风险与规避

字体版权，这真的是一个很容易被忽视，但一旦出问题就可能非常麻烦的领域。很多开发者在选择字体时，可能只关注字体的美观性、性能，却很少去仔细阅读字体的许可协议。我见过不少公司，因为使用了未经授权的字体，最终不得不支付高昂的版权费，甚至面临法律诉讼。这可不是开玩笑的，字体文件和图片、音乐一样，都是受版权保护的数字资产。

当你决定在项目中使用自定义字体时，第一步，也是最重要的一步，就是仔细核查字体的许可协议。这决定了你是否可以免费使用、是否可以用于商业项目、是否可以修改，以及是否需要署名等。

市面上常见的字体许可类型大致有几种：