在设计网站时，您是否曾为选择合适的字体而困惑不已？什么样的字体既能提升用户体验，又能凸显品牌形象？本文将带您探索一系列可免费使用的字体资源，以及如何简单高效地将它们引入您的项目中。您准备好揭开字体选择的奥秘吗？

摘要由智能技术生成

在当今的网页设计领域，字体的选择与应用对于提升页面视觉效果起着关键作用。随着技术发展，众多厂商推出了各具特色的字体，为网页设计师提供了丰富的选择。本文将详细介绍一些常用字体及其引用方式，帮助您在网页设计中更好地运用字体资源。

一、字体选择背景

微软雅黑曾是广泛应用的字体，但因其设计风格渐显老旧，许多网站在设置 font - family 字体家族时，开始优先引入苹果的苹方字体（PingFang SC）。这样做主要有两个目的：一是为了在 MAC 系统上呈现出更好的视觉效果；二是在 Windows 系统中，若已安装苹方字体，也能够改善字体显示效果。如今，不少厂商还在官网上推出了自研字体，并且这些字体大多可免费供个人使用，这为网页设计提供了更多的创意空间。

二、字体列表及引用链接

（一）专题站点

1. Google：其字体库网址为 https://fonts.google.com，但访问需要 VPN 连接。Google 提供了丰富多样的字体资源，其中部分字体在网页设计中被广泛应用，例如 Noto Sans 等。
2. Adobe：网址是 https://fonts.adobe.com，不过该平台的字体使用通常需要授权。Adobe 的字体以其高质量和专业性著称，适合对字体有较高设计要求且愿意获取授权使用的项目。
3. 阿里巴巴：旗下的字体平台 https://fonts.alibabagroup.com 汇聚了多款特色字体，如阿里妈妈系列字体等，这些字体在电商及相关领域的网页设计中能展现出独特的风格。
4. 钉钉进步体：官方链接为 https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y - W5aF3_ZJwzulU0nceIl，为钉钉品牌相关的网页设计提供了专属的字体风格。
5. 斗鱼追光体：可通过 https://www.douyu.com/topic/douyuZGT 访问获取，该字体在斗鱼直播平台相关的网页设计中具有较高的辨识度。
6. 快看世界体：其链接是 https://www.kuaikanmanhua.com/webs/fontPromotion，能为漫画或创意类网页增添独特的氛围。
7. Mi Sans：小米推出的字体，可在 https://hyperos.mi.com/font/zh/ 找到相关资源，具有简洁现代的风格，适用于多种类型的网页设计。
8. HarmonyOS Sans：由华为开发，链接为 https://developer.huawei.com/consumer/cn/design/resource - V1，体现了华为鸿蒙系统的设计理念，在相关的智能设备网页或应用界面设计中有很好的适配性。
9. OPPO Sans：OPPO 的字体资源位于 https://open.oppomobile.com/new/developmentDoc/info?id = 13223，能为 OPPO 相关的网页和产品宣传页面带来独特的品牌视觉感受。

（二）网页引入

1. Noto Sans（Google）：字重为可变，引用链接为 https://fonts.googleapis.com/css2?family = Noto + Sans + SC:wght@100..900&display=swap。通过该链接可方便地在网页中引入可变字重的 Noto Sans 字体，满足不同文本元素对字体粗细变化的需求。
2. Mi Sans（小米）：有多种字重可供选择。普通字重引用链接为 https://font.sec.miui.com/font/css?family = MiSans:0:Chinese_Simplify,Latin&display=swap；可变字重引用链接为 https://cdn - font.hyperos.mi.com/font/css?family = MiSans_VF:VF:Chinese_Simplify,Latin&display=swap。这使得网页设计师能够根据设计需求灵活运用 Mi Sans 字体的不同字重效果。
3. HarmonyOS Sans（B站）：字重 400 的引用链接为 https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css，字重 500 的引用链接为 https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css。B站 对 HarmonyOS Sans 字体的引用方式为网页设计提供了不同字重的选择，有助于在网页中营造出不同的视觉层次。
4. OPPO Sans#1（OPPO）：字重 400 的链接为 https://code.oppo.com/content/dam/oppo/common/fonts/font2/new - font/OPPOSansOS2 - 5000 - Regular.woff2，字重 500 的链接为 https://code.oppo.com/content/dam/oppo/common/fonts/font2/new - font/OPPOSansOS2 - 5000 - Medium.woff2。OPPO Sans 的不同字重文件可通过相应链接引入网页，为 OPPO 相关或追求类似风格的网页设计提供了多样化的字体表现形式。
5. 华康金刚黑#2（字节跳动）：字重 400 的引用链接为 https://fonts.bytedance.com/dfd/api/v1/css?family = DFPKingGothicGB - Regular&display=swap，字重 500 的引用链接为 https://fonts.bytedance.com/dfd/api/v1/css?family = DFPKingGothicGB - medium&display=swap。华康金刚黑字体在字节跳动的相关项目中有应用，其不同字重的引用方式为网页设计提供了更多的字体粗细选择。

需要注意的是，OPPO 的在线引用 WOFF2 截取了 5000 字，可能在一些不常用字的显示上会出现问题；华康金刚黑实际与苹方字体类似，使用时需要授权，尽管其 cdn 可跨域使用，但仍需谨慎操作。

三、字体引入方式

（一）CSS 引入

1. 方式一：在 html 文件中直接引入，使用 <link rel ='stylesheet' href = '链接.css'> 标签。这种方式简单直接，将字体样式表直接关联到 HTML 页面，使页面能够快速加载并应用字体样式。
2. 方式二：在 css 文件中引入，使用 @import url('链接.css'); 语句。这种方式将字体样式的引入整合到 CSS 文件中，便于统一管理和维护样式代码，提高代码的可读性和可维护性。

（二）WOFF2 引入

在 css 文件中引入 WOFF2 字体格式时，需使用 @font - face 规则。例如：

@font-face {
    font-family: OPPOSans;    //定义字体名称
    font-weight: 400;    //定义字重
    font-display: swap;
    src:url('链接.woff2') format('woff2');    //字体链接
}

完成字体文件引入后，在需要使用该字体的元素处，设定 css 属性 font - family 为相应的字体名称即可，且要确保字体名称与引用的字体名称完全一致。

四、字重说明

浏览器默认字重为 400。在网页设计中，若要对标题等元素使用不同字重的字体，有以下两种情况：

（一）情况一

当两个不同字重文件使用相同字体名称（如 OPPO - Sans），但在引入字体时设置了不同字重和链接时：

@font-face {
    font-family: OPPOSans;
    font-weight: 400;
    font-display: swap;
    src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2 - 5000 - Regular.woff2) format('woff2');
}
@font-face {
    font-family: OPPOSans;
    font-weight: 500;
    font-display: swap;
    src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2 - 5000 - Medium.woff2) format('woff2');
}

在对 h1 等标题元素引用字重 500 的字体时，只需在对应的元素设定 CSS 属性 font - weight 为 500 即可。例如：

div { font-weight: 400; }    // 普通元素在引入 400 字重时
h1 { font-weight: 500; }    // 标题元素在引入 500 字重时

（二）情况二

当两个不同字重文件使用不同字体名称（如 OPPO - Sans - Regular 和 OPPO - Sans - Medium），在引入字体时也设置了不同字重和链接时：

@font-face {
    font-family: OPPO - Sans - Regular;
    font-weight: 400;
    font-display: swap;
    src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2 - 5000 - Regular.woff2) format('woff2');
}
@font-face {
    font-family: OPPO - Sans - Medium;
    font-weight: 500;
    font-display: swap;
    src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2 - 5000 - Medium.woff2) format('woff2');
}

在使用不同字重时，必须使用当初设定该字重的字体名称。例如：

div { font-family: OPPO - Sans - Regular; }    // 普通元素在引入 400 字重时
h1 { font-family: OPPO - Sans - Medium; }    // 标题元素在引入 500 字重时

从便于管理的角度来看，情况一相对更为方便，因为使用相同名称可减少代码工作量，且更易于解读和维护。

五、font - display swap 说明

在许多引入字体的文件中，会标注 font - display: swap 属性。其作用是在字体尚未加载完成时，优先使用本地字体进行渲染，从而避免网页出现空屏现象，提升用户体验。若您希望深入了解关于该属性的研究资料以及字体加载对网页性能的影响，推荐阅读《知乎：一种减少字体加载影响的新方法：CSS 字体描述符(译)》。

六、unicode - range 优化说明

当引入官方的 css 字体链接时，可能会注意到 unicode - range 属性。该属性的作用是将一个字体分成多个字符集，根据页面所需字符，按需加载不同字符集文件。例如，若一个页面仅有 500 个字，且这些字恰好都在一个字符集内，那么其他字符集就无需加载，从而节省流量并优化加载速度。使用该优化方式的字体链接包括思源黑体（谷歌）、小米字体（小米）、鸿蒙字体（B站）、华康金刚黑（字节跳动）等。

七、字体文件格式

本文主要介绍的是 woff2 字体格式。在当前浏览器内核趋于 Chromium 的趋势下，对于个人站点而言，通常无需过多考虑旧版本浏览器的兼容性问题。若您想了解其他字体格式的相关信息，推荐阅读《知乎：关于字体格式》。

八、结语

就 Windows 系统上的字体清晰效果而言，虽然微软雅黑经过了特殊优化，但随着科技进步，显示器分辨率不断提高，如今在 Windows 系统中安装苹方字体后，其显示效果也相当出色。这意味着，即使使用未在 Windows 系统中专门优化的字体，也能够在 Windows 平台上展现出良好的视觉效果，为网页设计提供了更多的字体选择自由，设计师们可以根据项目需求和创意灵感，灵活运用各种字体资源，打造出独具魅力的网页视觉体验。

希望本文能够帮助您在网页设计过程中，更好地选择和应用字体资源，提升网页的整体品质和视觉吸引力。