如何在CSS中引入Google字体_通过或@import加载在线字体-css教程-PHP中文网

如何在CSS中引入Google字体_通过或@import加载在线字体

P粉602998670

发布： 2025-11-30 18:51:40

原创

860人浏览过

推荐使用<link>引入Google Fonts以提升性能，将字体链接放入HTML的<head>中，并在CSS中通过font-family调用；若需集中管理样式可使用@import，但需置于CSS最前且可能影响加载速度；建议减少字体变体、启用display=swap并设置备用字体以优化体验。

如何在css中引入google字体_通过<link>或@import加载在线字体

在网页开发中，使用美观的在线字体能显著提升页面视觉效果。Google Fonts 提供了大量免费且易用的字体资源，可以通过 <link> 标签或 CSS 中的 @import 规则引入。以下是两种常用方式的具体用法和注意事项。

使用 <link> 引入 Google 字体

将 Google Fonts 的链接放入 HTML 文件的 <head> 区域，是最推荐的方式，有助于性能优化。

步骤如下：

访问 Google Fonts 网站，选择需要的字体（例如：Roboto）
点击“+”添加字体，页面下方会生成嵌入代码
复制 <link> 代码并粘贴到 HTML 的 <head>
在 CSS 中通过 font-family 使用该字体

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

使用 @import 引入 Google 字体

如果希望将所有样式资源集中在 CSS 文件中，可以使用 @import 在 CSS 开头导入字体。

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

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

查看详情

注意：@import 必须写在 CSS 文件的最开始位置，否则无效。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

body {
font-family: 'Open Sans', sans-serif;
}

这种方式适合样式逻辑统一管理的项目，但可能略微影响加载速度，因为字体文件会在 CSS 解析后才请求。

性能与最佳实践建议

虽然两种方式都能实现字体加载，但有几点需要注意：

<link> 方式允许浏览器更早发起字体请求，提升加载性能
尽量减少字体变体（如只引入需要的粗细和斜体），避免加载过多资源
使用 display=swap 可防止文本闪烁（FOIT/FOUT），确保良好用户体验
为自定义字体设置 fallback 字体，比如 sans-serif

基本上就这些。根据项目结构选择合适的方式，多数情况下推荐使用 <link> 更高效。

以上就是如何在CSS中引入Google字体_通过或@import加载在线字体的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中有哪些命名规范 css中flex-grow属性是什么 css背景中有哪些方法 css中justify-content属性是什么 css中link和@import的区别