网页字体设置：默认字体、font-family 和 @font-face 使用指南

CSS

font-family

2025-07-31 10:13:34

2915字

16.2分钟

一个漂亮的网站，不仅仅依靠基础的版面布局设计，一款漂亮的字体也是至关重要。本文通过网站字体基础知识的讲解，让大家熟练掌握，网站中如何修改自己心仪的字体以及如何优化字体文件过大导致的加载过慢的问题。

不同操作系统、不同浏览器下的默认字体是不同的，在网页项目中，我们可以通过 CSS 的 font-family 和 @font-face 来让页面渲染出自己心仪的字体。在使用之前，我们需要了解一下，网页中关于字体设定方面的基础知识。

1 关于font-family属性

1.字体的 fallback 机制
在 CSS 中，可以通过 font-family 引用多种系列、多种字体，并且可以对字体先后顺序进行设置。当用户打开一个网页的时候，浏览就会读取 font-family 第一个引用的字体，并去检索用户当前操作系统下的字体，如有就显示，如没有就检索下一个，以此类推。若浏览器找不到指定的字体，或者没有设置 font-family 则会 fallback 到浏览器的默认字体。

2.字体的先后顺序设置
由于中文字体内都包含西文字体，如想优先显示效果较好的西文字体，需要将西文字体写在中文字体的前面。虽然用户群体中使用 Windows 系统较多，但 Mac 用户大部分会下载 Office，所以会存在许多 Windows 下常见的字体，比如微软雅黑。将 macOS 系统的字体写在 Windows 的前面，可以保证在对应平台显示更好的效果。

2 常见的网页字体

先了解 serif（衬线体）与 sans-serif（无衬线体），衬线体与无衬线体是两种最基础的字形分类，衬线体在笔画开始与末端的地方有像小三角的装饰。

衬线体更多使用在印刷品上，在纸张上有棱角的字体更容易被识别。而在屏幕显示中字体过多的装饰点缀容易造成视觉疲劳，所以在屏幕显示中更多使用无衬线体。下面是一些常见常用的字体：

system-ui： 一种通用字体系列，它会选择当前操作系统的默认字体渲染。如在 macOS 与 iOS 系统里 system-ui 指向的中文字体为苹方，西文字体为 .SF NS。

-apple-system： system-ui 的兼容写法，在 macOS 与 iOS 系统里调用苹果系统的默认字体。

BlinkMacSystemFont： 为 macOS Chrome 里调用苹果系统的默认字体。

Arial： 无衬线西文字体，经常与 Helvetica 一起出现，支持不同操作系统、不同浏览器，兼容性好，属于安全字体。

Tahoma： 无衬线西文字体，经常出现，支持不同操作系统、不同浏览器，兼容性好，属于安全字体。

Helvetica / Helvetica Neue： 苹果生态中最常用的无衬线西文字体，Helvetica Neue 是 Helvetica 的升级版，加了不同粗细、不同宽度的字形。

Segoe UI： 无衬线西文字体，Windows 系统的默认西文字体。

Roboto： 无衬线西文字体，Android 系统的默认西文字体。

苹方： 无衬线中文字体，苹果系统的默认中文字体，除了中文简体（PingFang SC），还有台湾繁体（PingFang TC）和香港繁体（PingFang HK）。

Hiragino Sans GB (冬青黑体）： 无衬线中文字体，用于兼容不支持苹方的旧版苹果系统，作为苹方字体的 fallback。

Microsoft YaHei (微软雅黑)： 无衬线中文字体，Windows 系统的默认中文字体，iOS 与 Android 系统不支持微软雅黑。

Noto Sans (思源黑体)： 无衬线中文字体，Android 系统的默认中文字体，由 Google 与 Adobe 推出的开源字体。除了中文简体（Noto Sans CJK SC），还有中文繁体（ Sans CJK TC）。

WenQuanYi Micro Hei (文泉驿微米黑)： 无衬线中文字体，Linux 系统的默认中文字体，用于兼容 Linux 系统。

Simsun (宋体)： 衬线中文字体，风格明显，支持 Windows 与 macOS 系统。

sans-serif： 一种无衬线字体系列，常见的兜底字体，在前面所有引用的字体都找不到时会生效，显示当前浏览器默认的无衬线字体。

3 使用自定义字体

使用自定义字体，常用的方式有2种，本地@font-face和外部样式表(如：Google Fonts Web API库），它们在使用和功能上有所不同。
@font-face：

使用方法：通过CSS的@font-face规则定义字体，并在页面中使用该字体。
优点：允许使用自定义字体，不依赖外部服务器，可以更好地控制字体的加载和显示。
缺点：需要手动管理字体文件，可能会增加页面加载时间。

外部样式表

使用方法：通过向HTML文档添加一个特殊的样式表链接，然后以CSS样式引用该字体即可。
优点：无需进行任何编程，支持多种字体格式，包括WOFF、WOFF2和TTF等。
缺点：需要依赖外部服务器，可能会受到网络延迟或服务器故障的影响。

3.1 方法一

@font-face方式：将需要使用的字体文件下载后放在服务器上，用 @font-face 将字体文件作为一个资源应用到 CSS样式文件。为了兼容不同浏览器需要准备多种字体格式文件，保证字体格式文件与浏览器的兼容情况。目前大部分浏览器都支持.woff2格式的字体文件，因此我们只需要引入.woff2这一种格式的字体文件即可。下面是详细使用方法：

@font-face {
  font-family: 'warick';
  src:local("warick"),url("./warick.257.woff2")format("woff2");
  font-style:normal;
  font-display:swap;
  font-weight:400;
}
body{
    font-family: 'warick';
}

项目中可以通过配置多个@font-face设置多种字体文件，需要使用那种字体，便可通过CSS属性 font-family: '字体名称';进行实际应用。

3.2 方法二

外部样式表：无需下载字体文件，项目中只需要引入对应的CSS外部样式表即可，然后通过CSS属性 font-family: '字体名称'引用需要的字体。下面以Google Fonts和jsDelivr cdn加速github仓库静态资源2种方式，讲讲如何使用。

Google Fonts站点，不仅支持字体文件下载，本地引入字体文件的方式，同时也支持Google Fonts Web API方式进行引入，比如：Noto Sans字体，我们在web项目中可以直接采用以下方式进行引入：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

然后项目中直接使用字体：

body, html {
   font-family: "Noto Sans", sans-serif;
}

因为fonts.googleapis.com在国外，加载过程会很慢，因此可以采用Google字体中国站，但是引用地址不是googlefonts.cn，所以很容易错把网站地址当作引用地址而出现错误。其引用地址是https://fonts.font.im。上面的引入地址可以调整为：

<link href="https://fonts.font.im/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

当然也可以将自己的字体文件和字体样式文件存放在github仓库，作为静态资源通过jsDelivr进行加速访问。详情查看使用jsDelivr+Github 实现静态资源免费CDN加速教程，本博客中的字体就是采用此方法进行引入加载。下面是详细使用方式：

引入字体样式文件，此文件通过@font-face定义了需要的字体和字体文件引用源

<link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/gh/AnyFork/Resource/fonts/division/Warick/warick.css">

然后项目中直接使用字体：

body, html {
    font-family: warick;
}

4 字体文件优化

在使用自定义字体时，有时候字体文件比较大，导致网页加载字体文件需要很长时间，影响站点体验，下面便讲讲如何优化。

unicode-range 是 CSS @font-face 规则中的一个属性，用于指定字体文件需要包含的 Unicode 字符范围，以优化字体加载效率。unicode-range 通过指定 Unicode 编码范围来控制字体加载，可显著减少字体文件体积和加载时间，使用这个特性可以优化字体文件加载，实现类似按需加载的效果。

当我们加载网站页面时，页面上展示的文字类型和文字数量都是有限的，比如：对于我的博客而言，主要涉及简体中文和西文，不涉及其他复杂的语种，而且页面上展示的汉字或者西文并非全部的Unicode 字符范围，因此我们只需要加载页面上包含的Unicode字符即可，不需要将整个字体文件加载进来，这样就可以将大的字体文件转变为小的字体文件进行加载。

中文网字计划站点提供了一个在线分包的工具，核心功能是将大的字体文件中包含的不同语种字体的 Unicode 字符，进行智能地分包，将不同语种字体按照 Unicode 字符范围进行拆分为多个小的字体文件。页面加载时，根据unicode-range自动加载所需的字体文件。这样可以明显提示字体加载速度，本站便是采用这种方法。

5 字体侵权问题

对于允许商用的字体，网站上可以任意使用，不存在字体侵权问题。

使用 font-family 的属性引用不可商用的字体，并且网页中也能显示这种字体，不会构成侵权问题，也不需要进行额外的授权许可。因为能够用 font-family 引用成功的字体是用户系统内本身就存在的字体。比如常见的苹方字体，只要我们系统中为引入苹方字体文件，只是应用苹方字体名，不存在侵权。

使用 @font-face 需要将字体文件下载后上传项目或服务器引用，使页面显示字体不再依赖用户系统自带字体，这时如要使用到不可商用的字体，需要购买字体版权，否则就属于侵权。

6 字体网站推荐

Google Fonts

Google字体中文官方站点，提供谷歌字体在线预览，提供Google字体调试工具，Google字体CDN,Google字体镜像，谷歌字体下载功能。

中文网字计划

字图 CDN, 一个免费的中文字体公益 CDN 服务, 致力于为国内外全球 CJK 开发者提供高质量网络字体服务，让中文字体在互联网世界起飞

字体天下

字体天下提供中文字体、手写字体、英文字体、图形字体等各种字体的高速免费下载和在线预览服务.

China Webmaster站长字体

字体库提供,中文字体下载,英文字体下载,书法字体下载,繁体字体下载,艺术字体下载,广告字体下载,方正字体下载,草书字体下载,等字体免费下载

更多字体站点，点击前往

最后更新时间: 2026-03-12 10:32:11

github仓库代码和gitee仓库代码双向自动同步方案

使用jsDelivr+Github 实现静态资源免费CDN加速