HTML如何加载字体？@font-face怎么使用？-html教程-PHP中文网

html中加载自定义字体最核心的方法是使用css的@font-face规则，通过定义font-family、src、font-weight、font-style和font-display等属性来加载并控制字体行为；2. 常见问题包括字体路径错误、格式兼容性差、跨域限制、css引用错误、缓存干扰和font-display设置不当，需通过开发者工具逐一排查；3. 优化策略包括优先使用woff2格式、合理设置font-display为swap、进行字体子集化、预加载关键字体、使用cdn加速及启用服务器压缩；4. 字体来源应选择合法渠道如google fonts、adobe fonts或开源库，并严格遵守授权协议，区分个人与商业用途，避免法律风险。

HTML如何加载字体？@font-face怎么使用？

HTML中加载自定义字体，最核心、最常用的方法就是通过CSS的

@font-face

登录后复制

规则。它允许你定义一套自己的字体，并告诉浏览器去哪里找到这些字体文件，然后就能在网页上随意使用了。

解决方案

要加载字体，你需要在CSS中定义

@font-face

登录后复制

规则。这个规则就像是给你的浏览器一个指令，告诉它：“嘿，这里有一个新字体，它叫什么名字，长什么样，以及去哪里能找到它的文件。”

一个基本的

@font-face

登录后复制

规则是这样的：

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

@font-face {
  font-family: 'MyCustomFont'; /* 给你的字体起一个独一无二的名字 */
  src: url('path/to/your/font.woff2') format('woff2'), /* 推荐woff2格式，体积最小 */
       url('path/to/your/font.woff') format('woff'),   /* 兼容性更好的woff格式 */
       url('path/to/your/font.ttf') format('truetype'); /* 作为备用，兼容更老的浏览器 */
  font-weight: normal; /* 字体的粗细，可以定义多个@font-face来对应不同粗细 */
  font-style: normal;  /* 字体的样式，比如斜体 */
  font-display: swap;  /* 字体加载策略，非常重要，后面会详细说 */
}

登录后复制

这里面有几个关键点：

```
font-family
```
登录后复制
登录后复制
登录后复制
: 这是你给自定义字体起的名字。在后续的CSS样式中，你就会用这个名字来引用它，比如
```
body { font-family: 'MyCustomFont', sans-serif; }
```
登录后复制
。
```
src
```
登录后复制
: 这是告诉浏览器字体文件在哪里。你可以列出多个
```
url()
```
登录后复制
，浏览器会按顺序尝试加载。为了最佳兼容性和性能，通常会提供多种格式的字体文件：
- woff2
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  : 这是目前最推荐的格式，压缩率最高，文件体积最小。
- woff
  登录后复制
  登录后复制
  登录后复制
  : 兼容性比
  woff2
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  好，被广泛支持。
- ```
ttf
```
  登录后复制
  登录后复制
  (TrueType): 兼容性更广，但文件通常较大。
- ```
eot
```
  登录后复制
  (Embedded OpenType): 主要是为了兼容IE老版本，现在基本可以忽略。
- ```
svg
```
  登录后复制
  : 用于SVG字体，现在也基本不用了。我个人习惯把
  woff2
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  放在最前面，这样现代浏览器会优先加载它，效率最高。
```
font-weight
```
登录后复制
登录后复制
和
```
font-style
```
登录后复制
登录后复制
: 如果你的字体有不同的粗细（比如细体、常规、粗体）或样式（斜体），你需要为每一种组合单独定义一个
@font-face
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
规则，并在这里指定对应的
```
font-weight
```
登录后复制
登录后复制
和
```
font-style
```
登录后复制
登录后复制
。这样，当你在CSS中写
```
font-weight: bold;
```
登录后复制
时，浏览器就能找到对应的粗体字体文件。
```
font-display
```
登录后复制
登录后复制
登录后复制
: 这个属性简直是网页性能优化的一大利器！它决定了字体文件在加载过程中，文本应该如何显示。
```
swap
```
登录后复制
登录后复制
是我最常用的一个值，它会先用系统默认字体显示文本，等自定义字体加载完成后再替换，这样用户就不会看到一片空白（FOIT - Flash of Invisible Text），体验会好很多。

定义好

@font-face

登录后复制

之后，你就可以在你的CSS规则中像使用任何其他字体一样使用它了：

body {
  font-family: 'MyCustomFont', Arial, sans-serif; /* 优先使用自定义字体，如果加载失败则回退到Arial或无衬线字体 */
}

h1 {
  font-family: 'MyCustomFont';
  font-weight: bold; /* 如果你为MyCustomFont定义了粗体版本，这里会加载对应的粗体文件 */
}

登录后复制

为什么我的自定义字体加载不出来？常见问题排查与解决

说实话，自定义字体加载不出来是前端开发中特别常见的问题，我自己也遇到过好多次。通常不是什么大毛病，但需要一点耐心去排查。

字体文件路径不对？ 这是最最常见的错误。
```
src: url('path/to/your/font.woff2')
```
登录后复制
这里的路径必须是准确的。它可能是相对路径（比如
```
../fonts/myfont.woff2
```
登录后复制
）或绝对路径（
```
/fonts/myfont.woff2
```
登录后复制
）。打开浏览器的开发者工具（F12），看Network（网络）选项卡，刷新页面，检查你的字体文件是否发起了请求，以及请求的状态码是不是200（成功）。如果是404（未找到），那路径肯定错了。
字体格式兼容性问题？ 你提供的字体文件格式，浏览器是否支持？比如，IE 8及以下只支持
```
.eot
```
登录后复制
，而现代浏览器普遍支持
```
.woff
```
登录后复制
和
```
.woff2
```
登录后复制
。如果你只提供了一种格式，而用户浏览器不支持，那字体自然就加载不出来。所以，提供
woff2
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
、
```
woff
```
登录后复制
登录后复制
登录后复制
、
```
ttf
```
登录后复制
登录后复制
多种格式是比较稳妥的做法。
跨域问题（CORS）？ 如果你的字体文件是托管在另一个域名或CDN上的（比如你的网站是
```
www.example.com
```
登录后复制
，但字体文件在
```
fonts.cdn.com
```
登录后复制
），那么浏览器可能会因为同源策略而阻止字体加载。这时候，字体服务器需要设置CORS（Cross-Origin Resource Sharing）头部，允许你的域名访问这些字体文件。通常，你需要让服务器添加
```
Access-Control-Allow-Origin: *
```
登录后复制
或者具体指定你的域名。这是个隐藏杀手，排查起来可能有点费劲，但一旦遇到，通常就是它。
CSS选择器没对上？ 你定义了
@font-face
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
，但有没有在具体的CSS规则中正确引用它？比如，你写了
```
font-family: 'MyCustomFont';
```
登录后复制
，但这个规则有没有作用到你想要改变字体的元素上？有没有被其他更具体的CSS规则覆盖掉？检查一下元素的Computed Style（计算样式）看
```
font-family
```
登录后复制
登录后复制
登录后复制
属性是不是你定义的那个。
浏览器缓存？ 在开发过程中，浏览器可能会缓存旧的CSS或字体文件。有时候你改了字体文件或路径，但浏览器还在用旧的。尝试清空浏览器缓存，或者在开发者工具的网络选项卡里勾选“Disable cache”（禁用缓存）再刷新。
```
font-display
```
登录后复制
登录后复制
登录后复制
属性的影响？ 如果你设置了
```
font-display: block;
```
登录后复制
登录后复制
，那么在字体加载完成之前，文本是不会显示的（FOIT）。这可能会让你误以为字体没加载成功，实际上它只是在等待。换成
```
swap
```
登录后复制
登录后复制
或者
```
fallback
```
登录后复制
会让你更快看到内容。

优化字体加载性能：提升用户体验的关键策略

加载自定义字体虽然能让你的网站看起来更独特，但如果处理不好，它也可能成为网站加载速度的“拖油瓶”。毕竟，字体文件也是要下载的资源。

选择最佳字体格式：
woff2
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
优先毫无疑问，
woff2
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
是当前网络字体格式的王者。它的压缩率比
```
woff
```
登录后复制
登录后复制
登录后复制
高出约30%，这意味着更小的文件体积和更快的下载速度。所以，在你的
@font-face
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
规则中，务必把
woff2
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
格式的字体文件放在最前面。
合理使用
```
font-display
```
登录后复制
登录后复制
登录后复制
属性这是我个人觉得对用户体验影响最大的一个属性。
- ```
font-display: swap;
```
  登录后复制
  ：这是我最推荐的。它会立即使用系统默认字体显示文本，一旦自定义字体加载完成，就“交换”过来。用户不会看到空白，内容始终是可见的，只是样式会变一下。
- ```
font-display: fallback;
```
  登录后复制
  ：提供一个短暂的空白期，然后回退到系统字体，字体加载完成后再替换。空白期比
```
block
```
  登录后复制
  短。
- ```
font-display: optional;
```
  登录后复制
  ：如果字体加载很快，就用自定义字体；如果慢，就直接用系统字体，不替换。这对于非核心的装饰性字体很有用。
- ```
font-display: block;
```
  登录后复制
  登录后复制
  ：在字体加载完成前，文本会保持不可见。这会导致FOIT（Flash of Invisible Text），用户体验很差，除非你的设计对字体有极高的要求且不能容忍任何回退。
字体子集化（Subsetting）：按需加载 一个完整的字体文件，尤其是中文字体，可能包含数万个字符，体积非常庞大。但你的网站可能只用到了其中一部分字符（比如英文字母、数字、标点符号，或者特定的汉字）。字体子集化就是只提取你需要的字符，生成一个更小的字体文件。例如，如果你只用字体来显示标题，并且标题都是英文，那你完全可以只包含英文字符。市面上有很多工具可以做子集化，比如Font Squirrel的Webfont Generator、Glyphhanger等。这个优化效果是立竿见影的。
预加载（Preloading）字体文件 你可以使用
```
<link rel="preload" as="font" crossorigin>
```
登录后复制
来告诉浏览器：“嘿，这个字体文件我马上要用，你赶紧提前加载它！”这样，浏览器可以在解析CSS之前就开始下载字体，避免渲染阻塞。
```
<link rel="preload" href="path/to/your/font.woff2" as="font" type="font/woff2" crossorigin>
```
登录后复制
```
crossorigin
```
登录后复制
属性很重要，因为字体文件通常会触发CORS请求，即使它们在同一个域名下。
利用CDN加速 如果你的字体文件很大或者用户分布在全球各地，将字体托管在CDN（内容分发网络）上可以显著提升加载速度。CDN会将文件分发到离用户最近的服务器，减少网络延迟。
服务器端Gzip/Brotli压缩 确保你的服务器为字体文件启用了Gzip或Brotli压缩。这些压缩算法可以进一步减小字体文件的传输体积，加快下载速度。大部分现代Web服务器（如Nginx, Apache）都支持配置。

选择合适的字体来源与版权考量

选择自定义字体，除了技术上的加载和优化，还有一个非常重要的方面——字体来源和版权。这可不是小事，用错了可能会有法律风险。

字体来源：
- Google Fonts: 这是最流行、最方便的免费字体库之一。它提供了大量高质量的字体，并且Google的CDN服务通常加载速度很快。你只需要在HTML中引入一个
```
<link>
```
  登录后复制
  标签，或者在CSS中
```
@import
```
  登录后复制
  ，然后直接使用
  font-family
  登录后复制
  登录后复制
  登录后复制
  即可。但缺点是它依赖外部服务，且字体文件本身可能较大（如果你不进行子集化）。
- Adobe Fonts (Typekit): 如果你是Adobe Creative Cloud用户，Adobe Fonts是一个非常好的选择。它提供了大量专业字体，集成在Adobe生态系统中，使用方便。但它是订阅制服务。
- 自托管字体： 这是最灵活的方式，你可以将字体文件直接放在自己的服务器上。这样你对字体加载有完全的控制权，不受第三方服务的影响。但你需要自己处理文件的存储、CDN配置、版本管理等问题。
- 开源字体库/免费字体网站： 比如Font Squirrel、DaFont、1001 Free Fonts等。这些网站提供了很多免费字体，但务必仔细阅读它们的授权协议。
版权考量： 这绝对是重中之重！不是所有“免费下载”的字体都可以随意用于商业用途。
- 个人使用 vs. 商业使用： 很多字体是免费供个人使用的，但如果你要用于商业项目（比如公司官网、电商网站、广告），就需要购买商业授权。
- 授权类型：
  - OFL (Open Font License)： 开放字体协议，通常允许自由使用、修改和分发，包括商业用途。Google Fonts上的大部分字体都遵循OFL。
  - 桌面授权 vs. Web授权： 有些字体你买了桌面版授权，但并不意味着你可以在网页上使用它。网页字体通常需要单独的Web Font License。
  - 一次性购买 vs. 订阅： 有些是买断式授权，有些是按年订阅。
- 风险： 如果你未经授权在商业项目中使用字体，字体厂商有权追究你的法律责任，要求赔偿。我见过不少公司因此被索赔的案例，所以千万不要抱有侥幸心理。在选择和使用任何字体之前，花几分钟仔细阅读其授权协议，这能省去你未来很多麻烦。

最后，一个小的个人观点：虽然自定义字体能让网站更具品牌特色，但有时候，为了极致的性能和加载速度，使用系统字体（比如

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

登录后复制

）也是一个非常明智的选择。它不需要下载，瞬间加载，而且在用户设备上显示效果最佳。这是一种权衡，取决于你的项目需求和对用户体验的优先级。

以上就是HTML如何加载字体？@font-face怎么使用？的详细内容，更多请关注php中文网其它相关文章！