如何用css import引入字体样式表-css教程-PHP中文网

如何用css import引入字体样式表

P粉602998670

发布： 2025-10-03 16:06:02

原创

304人浏览过

答案：@import可用于引入在线字体，但推荐使用link标签以提升性能。首先在CSS顶部用@import导入如Google Fonts的URL，再定义font-family应用字体；需注意@import必须置于样式表开头且影响加载速度。更优方案是在HTML的head中通过link标签引入字体，使浏览器尽早加载。对于本地字体文件，则应使用@font-face规则声明。因此，尽管@import使用方便，生产环境建议优先采用link方式优化性能。

如何用css import引入字体样式表

使用 @import 引入字体样式表是一种在 CSS 中加载外部字体文件的方法，通常用于引入 Google Fonts 或其他托管的字体服务。下面是如何正确使用 @import 来引入字体样式的详细说明。

1. 使用 @import 引入在线字体（如 Google Fonts）

在你的 CSS 文件或 HTML 页面的 <style> 标签中，可以在最顶部使用 @import 导入字体链接：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

然后在你的样式中使用该字体：

    body {<br>
      font-family: 'Roboto', sans-serif;<br>
    }

登录后复制

2. 注意事项和最佳实践

@import 必须放在 CSS 文件的开头，否则不会生效。如果有多个 @import 规则，它们必须都在其他样式规则之前。

确保 @import 在所有 body、.class 等样式定义之前
使用 HTTPS 链接以避免混合内容问题
注意性能影响：@import 会增加一次额外的 HTTP 请求，可能延缓字体加载

3. 替代方案：推荐使用 link 标签（更高效）

虽然 @import 可以用，但更推荐在 HTML 的 <head> 中使用 <link> 引入字体，这样浏览器能更快地发现资源：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

之后同样可以在 CSS 中使用 font-family: 'Roboto', sans-serif;

4. 自定义字体文件的引入方式（非 @import）

如果你有本地字体文件（如 .woff2, .ttf），应使用 @font-face 而不是 @import：

    @font-face {<br>
      font-family: 'MyCustomFont';<br>
      src: url('fonts/MyFont.woff2') format('woff2');<br>
      font-display: swap;<br>
    }

登录后复制

然后再通过 font-family: 'MyCustomFont'; 应用字体。

基本上就这些。@import 适合快速引入在线字体服务，但在生产环境中建议优先使用 <link> 方式提升性能。

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

以上就是如何用css import引入字体样式表的详细内容，更多请关注php中文网其它相关文章！