在网页中引入字体是提升网页视觉体验的重要手段，通过自定义字体可以让网页更具品牌特色和可读性，常见的引入字体方式主要有以下几种，每种方式都有其适用场景和优缺点,开发者可以根据实际需求选择合适的方法。
使用Web安全字体
Web安全字体是指大多数操作系统和浏览器都默认支持的字体，如Arial、Times New Roman、Georgia、Verdana、Courier New等，使用这类字体无需额外引入，可以直接通过CSS的font-family属性指定。
body {
font-family: Arial, sans-serif;
}
优点是加载速度快、兼容性好，缺点是字体样式单一,缺乏个性化设计。
使用Google Fonts
Google Fonts提供了大量免费的开源字体，开发者可以通过其官网选择所需字体，获取嵌入代码,引入方式主要有两种：
- 通过标签引入：在HTML的标签中添加Google Fonts提供的链接，
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
然后在CSS中通过font-family使用,如：
（图片来源网络，侵删）font-family: 'Roboto', sans-serif;
- 通过@import引入：在CSS文件顶部使用@import规则导入字体，
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');Google字体的优点是字体丰富、免费且易于使用，支持多种字重和样式,适合大多数网站项目。
使用@font-face规则
@font-face是CSS3提供的一种自定义字体引入方式，允许开发者加载服务器或本地的字体文件，使用时需要准备字体文件（如WOFF2、WOFF、TTF、EOT等格式），并确保字体文件部署在服务器上,基本语法如下：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff'),
url('fonts/MyCustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
然后在其他CSS规则中通过font-family引用该字体：
body {
font-family: 'MyCustomFont', sans-serif;
}
@font-face的优点是完全自定义字体，不受第三方平台限制，缺点是需要处理字体文件格式兼容性，且字体文件较大时可能影响加载速度，为优化性能，建议使用WOFF2格式（现代浏览器支持度高且压缩率高）,并配合字体子集化技术只提取需要的字符。
字体加载性能优化
无论采用哪种方式，字体加载都可能影响页面性能,因此需要优化：
- 字体预加载：使用提前加载字体文件，
<link rel="preload" href="fonts/MyCustomFont.woff2" as="font" type="font/woff2" crossorigin>
- 字体显示策略：通过font-display属性控制字体加载过程中的显示方式，如
font-display: swap;表示先使用默认字体，字体加载完成后替换为自定义字体,避免页面布局偏移。 - 延迟加载：非首屏字体可使用JavaScript或CSS的
@font-face结合媒体查询延迟加载。 - CDN加速：将字体文件部署到CDN,利用分布式网络提升加载速度。
字体格式兼容性
不同浏览器对字体格式的支持不同，建议使用以下组合： | 字体格式 | 兼容浏览器 | 特点 | |----------|------------------|--------------------------| | WOFF2 | 现代浏览器（Chrome、Firefox、Edge、Safari 14+） | 压缩率高，加载速度快 | | WOFF | 所有现代浏览器 | 兼容性好，压缩率较高 | | TTF | Safari、iOS | 基础格式，文件较大 | | EOT | IE8及以下 | 旧版IE专用，已逐渐淘汰 |
字体版权注意事项
引入字体时需注意版权问题，Google Fonts提供的字体大多为SIL Open Font License或Apache License，可免费商用；而商业字体（如Adobe Fonts、字体版权公司字体）需购买授权后方可使用，使用@font-face时，确保字体文件已获得授权,避免法律风险。
相关问答FAQs
Q1: 如何解决自定义字体加载导致的页面闪烁问题？
A1: 页面闪烁通常是由于字体加载完成后替换默认字体导致的布局偏移，解决方法包括：
- 使用
font-display: swap;实现字体替换时的平滑过渡； - 预加载关键字体文件（
<link rel="preload">）； - 为字体设置备用字体栈，确保在字体未加载完成时有可用的回退字体；
- 考虑使用系统默认字体作为首屏字体,延迟加载自定义字体。
Q2: 如何减少自定义字体文件的大小以提升加载速度？
A2: 减少字体文件大小的方法主要有：
- 字体子集化：使用工具（如Font Squirrel、fonttools）提取网页中实际使用的字符，生成精简字体文件；
- 选择高效格式：优先使用WOFF2格式，比WOFF小30%-50%；
- 按需加载：仅加载当前页面需要的字重和样式（如常规体、粗体）；
- 压缩字体文件：使用Gzip或Brotli压缩服务器上的字体文件；
- 限制字符集：对于中文字体，可优先加载常用字库（如GB2312）,而非全字符集。
