答案：@import可用于引入在线字体，但推荐使用link标签以提升性能。首先在CSS顶部用@import导入如Google Fonts的URL，再定义font-family应用字体；需注意@import必须置于样式表开头且影响加载速度。更优方案是在HTML的head中通过link标签引入字体，使浏览器尽早加载。对于本地字体文件，则应使用@font-face规则声明。因此，尽管@import使用方便，生产环境建议优先采用link方式优化性能。
使用 @import 引入字体样式表是一种在 CSS 中加载外部字体文件的方法，通常用于引入 Google Fonts 或其他托管的字体服务。下面是如何正确使用 @import 来引入字体样式的详细说明。
1. 使用 @import 引入在线字体（如 Google Fonts）
在你的 CSS 文件或 HTML 页面的@import 导入字体链接：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
2. 注意事项和最佳实践
@import 必须放在 CSS 文件的开头，否则不会生效。如果有多个 @import 规则，它们必须都在其他样式规则之前。- 确保
@import在所有body、.class等样式定义之前 - 使用 HTTPS 链接以避免混合内容问题
- 注意性能影响：@import 会增加一次额外的 HTTP 请求，可能延缓字体加载
3. 替代方案：推荐使用 link 标签（更高效）
虽然 @import 可以用，但更推荐在 HTML 的font-family: 'Roboto', sans-serif;
4. 自定义字体文件的引入方式（非 @import）
如果你有本地字体文件（如 .woff2, .ttf），应使用@font-face 而不是 @import：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyFont.woff2') format('woff2');
font-display: swap;
}
然后再通过 font-family: 'MyCustomFont'; 应用字体。
基本上就这些。@import 适合快速引入在线字体服务，但在生产环境中建议优先使用 方式提升性能。
立即学习“前端免费学习笔记（深入）”；
