使用@font-face引入外部字体可提升网页设计感，需注意格式兼容、路径正确及跨域设置；推荐使用woff2格式并提供多格式备选，结合font-display:swap和preload优化加载性能。
外部字体引入CSS，说白了，就是让你的网页能用一些不常见的字体，提升一下设计感。但操作起来，有时候也挺让人头大的，尤其是在兼容性上。
使用
@font-face规则来引入外部字体。
解决方案
首先，你需要准备好你的字体文件。常见的字体格式有
.ttf、
.woff、
.woff2、
.otf、
.eot。
.woff2格式通常是首选，因为它压缩率高，兼容性也不错。
接下来，在你的CSS文件中使用
@font-face规则：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'YourFontName'; /* 给你的字体起个名字 */
src: url('path/to/your/font.woff2') format('woff2'),
url('path/to/your/font.woff') format('woff'),
url('path/to/your/font.ttf') format('truetype'); /* 兼容不同浏览器 */
font-weight: normal; /* 字重，比如normal、bold、lighter */
font-style: normal; /* 字体样式，比如normal、italic */
}
body {
font-family: 'YourFontName', sans-serif; /* 应用字体，sans-serif是备用字体 */
}注意替换
'YourFontName'、
'path/to/your/font.woff2'等为你自己的字体名称和路径。
一些坑：
- 路径问题： 字体文件的路径一定要正确，不然字体是加载不出来的。建议使用相对路径，方便迁移。
-
跨域问题： 如果你的字体文件放在不同的域名下，可能会出现跨域问题。需要在服务器端设置
Access-Control-Allow-Origin
头。 - 字体格式： 不同浏览器支持的字体格式可能不同。为了兼容性，建议提供多种格式。
为什么我的字体引入了，但是显示不出来？
这问题挺常见的。检查一下几点：
- 路径： 路径真的对吗？用开发者工具的网络面板看看字体文件有没有加载成功，404了就说明路径有问题。
-
字体名称：
@font-face
里面font-family
的名字和你使用的font-family
名字是不是一样？大小写也要注意。 -
字体格式： 浏览器不支持你提供的字体格式。尝试提供多种格式，比如
.woff2
、.woff
、.ttf
。 - 缓存： 有时候浏览器缓存会导致字体不更新。清除一下浏览器缓存试试。
-
权重和样式： 确保你设置的
font-weight
和font-style
和字体文件匹配。比如，你引入的是一个粗体字体，但是你设置了font-weight: normal
，可能就显示不出来。
除了本地引入，还有其他方法吗？
当然有。现在很多在线字体服务，比如Google Fonts、Adobe Fonts，可以直接引入。
Google Fonts：
- 访问Google Fonts官网。
- 选择你喜欢的字体。
- 复制提供的
<link>
标签到你的HTML文件的<head>
标签里。 - 复制提供的CSS规则到你的CSS文件里。
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}Adobe Fonts (Typekit):
- 注册一个Adobe账号。
- 在Adobe Fonts网站上选择你喜欢的字体。
- 创建一个Web项目。
- 将字体添加到你的Web项目。
- 复制提供的代码到你的HTML和CSS文件中。
使用在线字体服务的好处是：
- 方便： 不需要自己上传字体文件。
- CDN加速： 字体文件通过CDN加速，加载速度更快。
- 版本管理： 字体服务会自动更新字体版本。
如何优化字体加载速度？
字体加载慢会影响用户体验。可以尝试以下方法：
-
使用
font-display
属性： 这个属性可以控制字体加载时的行为。常用的值有swap
、fallback
、optional
。swap
表示字体加载之前先显示备用字体，加载完成后再替换成目标字体。
@font-face {
font-family: 'YourFontName';
src: url('path/to/your/font.woff2') format('woff2');
font-display: swap;
}-
使用
preload
： 提前加载字体文件。
<link rel="preload" href="path/to/your/font.woff2" as="font" type="font/woff2" crossorigin>
字体子集化： 如果你的网站只用到字体中的一部分字符，可以提取出这些字符，生成一个更小的字体文件。可以使用工具，比如FontForge。
压缩字体文件： 使用工具压缩字体文件，减小文件大小。
总而言之，字体引入是个细致活，需要耐心调试。希望这些能帮到你。
