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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《HTML如何加载字体？@font-face使用教程》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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中加载自定义字体，最核心、最常用的方法就是通过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定义了粗体版本，这里会加载对应的粗体文件 */
}

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

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

1. 字体文件路径不对？ 这是最最常见的错误。src: url('path/to/your/font.woff2') 这里的路径必须是准确的。它可能是相对路径（比如../fonts/myfont.woff2）或绝对路径（/fonts/myfont.woff2）。打开浏览器的开发者工具（F12），看Network（网络）选项卡，刷新页面，检查你的字体文件是否发起了请求，以及请求的状态码是不是200（成功）。如果是404（未找到），那路径肯定错了。

2. 字体格式兼容性问题？ 你提供的字体文件格式，浏览器是否支持？比如，IE 8及以下只支持.eot，而现代浏览器普遍支持.woff和.woff2。如果你只提供了一种格式，而用户浏览器不支持，那字体自然就加载不出来。所以，提供woff2、woff、ttf多种格式是比较稳妥的做法。

3. 跨域问题（CORS）？ 如果你的字体文件是托管在另一个域名或CDN上的（比如你的网站是www.example.com，但字体文件在fonts.cdn.com），那么浏览器可能会因为同源策略而阻止字体加载。这时候，字体服务器需要设置CORS（Cross-Origin Resource Sharing）头部，允许你的域名访问这些字体文件。通常，你需要让服务器添加Access-Control-Allow-Origin: *或者具体指定你的域名。这是个隐藏杀手，排查起来可能有点费劲，但一旦遇到，通常就是它。

4. CSS选择器没对上？ 你定义了@font-face，但有没有在具体的CSS规则中正确引用它？比如，你写了font-family: 'MyCustomFont';，但这个规则有没有作用到你想要改变字体的元素上？有没有被其他更具体的CSS规则覆盖掉？检查一下元素的Computed Style（计算样式）看font-family属性是不是你定义的那个。

5. 浏览器缓存？ 在开发过程中，浏览器可能会缓存旧的CSS或字体文件。有时候你改了字体文件或路径，但浏览器还在用旧的。尝试清空浏览器缓存，或者在开发者工具的网络选项卡里勾选“Disable cache”（禁用缓存）再刷新。

6. font-display属性的影响？ 如果你设置了font-display: block;，那么在字体加载完成之前，文本是不会显示的（FOIT）。这可能会让你误以为字体没加载成功，实际上它只是在等待。换成swap或者fallback会让你更快看到内容。

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

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

1. 选择最佳字体格式：woff2优先 毫无疑问，woff2是当前网络字体格式的王者。它的压缩率比woff高出约30%，这意味着更小的文件体积和更快的下载速度。所以，在你的@font-face规则中，务必把woff2格式的字体文件放在最前面。

2. 合理使用font-display属性 这是我个人觉得对用户体验影响最大的一个属性。

   • font-display: swap;：这是我最推荐的。它会立即使用系统默认字体显示文本，一旦自定义字体加载完成，就“交换”过来。用户不会看到空白，内容始终是可见的，只是样式会变一下。
   • font-display: fallback;：提供一个短暂的空白期，然后回退到系统字体，字体加载完成后再替换。空白期比block短。
   • font-display: optional;：如果字体加载很快，就用自定义字体；如果慢，就直接用系统字体，不替换。这对于非核心的装饰性字体很有用。
   • font-display: block;：在字体加载完成前，文本会保持不可见。这会导致FOIT（Flash of Invisible Text），用户体验很差，除非你的设计对字体有极高的要求且不能容忍任何回退。

3. 字体子集化（Subsetting）：按需加载 一个完整的字体文件，尤其是中文字体，可能包含数万个字符，体积非常庞大。但你的网站可能只用到了其中一部分字符（比如英文字母、数字、标点符号，或者特定的汉字）。 字体子集化就是只提取你需要的字符，生成一个更小的字体文件。例如，如果你只用字体来显示标题，并且标题都是英文，那你完全可以只包含英文字符。市面上有很多工具可以做子集化，比如Font Squirrel的Webfont Generator、Glyphhanger等。这个优化效果是立竿见影的。

4. 预加载（Preloading）字体文件 你可以使用来告诉浏览器：“嘿，这个字体文件我马上要用，你赶紧提前加载它！”这样，浏览器可以在解析CSS之前就开始下载字体，避免渲染阻塞。

   <link rel="preload" href="path/to/your/font.woff2" as="font" type="font/woff2" crossorigin>

   crossorigin属性很重要，因为字体文件通常会触发CORS请求，即使它们在同一个域名下。

5. 利用CDN加速 如果你的字体文件很大或者用户分布在全球各地，将字体托管在CDN（内容分发网络）上可以显著提升加载速度。CDN会将文件分发到离用户最近的服务器，减少网络延迟。

6. 服务器端Gzip/Brotli压缩 确保你的服务器为字体文件启用了Gzip或Brotli压缩。这些压缩算法可以进一步减小字体文件的传输体积，加快下载速度。大部分现代Web服务器（如Nginx, Apache）都支持配置。

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

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

1. 字体来源：

   • Google Fonts: 这是最流行、最方便的免费字体库之一。它提供了大量高质量的字体，并且Google的CDN服务通常加载速度很快。你只需要在HTML中引入一个标签，或者在CSS中@import，然后直接使用font-family即可。但缺点是它依赖外部服务，且字体文件本身可能较大（如果你不进行子集化）。
   • Adobe Fonts (Typekit): 如果你是Adobe Creative Cloud用户，Adobe Fonts是一个非常好的选择。它提供了大量专业字体，集成在Adobe生态系统中，使用方便。但它是订阅制服务。
   • 自托管字体： 这是最灵活的方式，你可以将字体文件直接放在自己的服务器上。这样你对字体加载有完全的控制权，不受第三方服务的影响。但你需要自己处理文件的存储、CDN配置、版本管理等问题。
   • 开源字体库/免费字体网站： 比如Font Squirrel、DaFont、1001 Free Fonts等。这些网站提供了很多免费字体，但务必仔细阅读它们的授权协议。

2. 版权考量： 这绝对是重中之重！不是所有“免费下载”的字体都可以随意用于商业用途。

   • 个人使用 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加载字体》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！