❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

2025年10+个免费商用字体和 WebFonts 字体 CDN 服务网站

文武科技柜
2025年4月3日 15:56
原文

前言

在设计和开发领域，免费商用字体和 WebFonts 字体 CDN 服务是提升项目视觉效果和加载效率的关键工具。免费商用字体避免了版权风险，而 WebFonts CDN 则通过全球分发加速字体加载。以下整理了当前主流的免费商用字体库及 WebFonts CDN 平台，涵盖中英文资源，帮助大家一站式解决需求。

免费商用字体和 WebFonts 字体 CDN 服务
免费商用字体和 WebFonts 字体 CDN 服务

免费商用字体库

Google Fonts

Google Fonts 全球最大的开源字体库，提供上千种免费商用字体，包括部分中文字体（如Noto系列）。支持直接嵌入代码或自托管，兼容性强，但国内访问需代理优化。

  • 特点：全球最知名的免费字体库，提供上千种开源字体，涵盖衬线体、无衬线体、手写体等，支持多语言（包括部分中文字体）。所有字体遵循开放字体许可证（OFL），可免费商用且无需额外授权。

Font Squirrel

Font Squirrel

  • 特点：专注于免费商用字体，所有资源均经过版权审核，提供TTF、OTF、WOFF等格式下载，适合网页设计和印刷项目。

猫啃网

猫啃网 国内权威中文免费商用字体平台，收录589款字体，授权信息透明，支持批量下载及在线预览，适合品牌设计和宣传物料制作。

  • 特点：国内领先的中文免费商用字体平台，收录589款字体，授权信息透明，支持在线预览和批量下载。

猫啃网
猫啃网

ZeoSeven Fonts（ZSFT）

ZeoSeven Fonts 提供764款免费商用字体，包含编程字体（如JetBrains Maple Mono）及多语言支持。其内置WebFonts CDN服务，支持HTML、CSS、JS等多种嵌入方式，开发者可快速部署字体并享受全球CDN加速，尤其适合技术博客和国际化项目。

  • 特点：提供764款免费商用字体，涵盖编程字体（如JetBrains Mono）、多语言字体等，支持多种嵌入方式，是开发者的优选。

自由字体

  • 网址：自由字体
  • 特点：国内权威免费字体平台，整合全网可商用资源，规避版权风险，适合企业宣传和品牌设计。

DaFont

  • 网址：DaFont
  • 特点：海量字体库，部分支持免费商用，需仔细阅读授权说明，适合个性化设计需求。

100font

100font 整合多语种免费商用字体（含中、英、日、韩），同时提供免费图片和音效资源，分类清晰，适合设计师一站式获取素材。

  • 特点：分类清晰，支持中、英、日、韩等多语种字体，同时提供免费商用图片和音效资源。

100font
100font

Google Noto Fonts

  • 网址：Google Noto Fonts

  • 特点：谷歌推出的开源字体，覆盖全球语言字符，适合国际化项目。

Windfonts

Windfonts 作为国内首家开源免费中文WebFonts平台，Windfonts 提供中文字体切片服务及CDN分发，支持WordPress插件与API对接。其开源工具链优化了字体分包策略，结合自托管或第三方CDN，可显著提升中文字体加载速度，适用于企业官网及多语言应用。

中文网字计划

中文网字计划 基于Google Fonts的分包技术改进，中文网字计划通过优化字符区间和全球CDN分发，实现中文字体全量级按需加载。开发者可通过其开源工具（如@konghayao/cn-font-split）切割字体并托管至CDN，尤其适合动态内容网站。

FontCDN

FontCDN（Github开源地址、预览地址） 是一个开源解决方案，允许用户自托管字体文件并通过CDN分发，支持WOFF2等现代格式压缩。其配置简单，可无缝集成React、Vue等框架，适合需要私有化部署的开发者。

Free Font

Free Font（预览地址） 收录可商用的免费英文/汉字字体。收录了 927 个可商用免费字体。

Best Free Fonts

Best Free Fonts 最佳免费字体精选了 214 种免费字体。包括衬线字体、无衬线字体、手写字体和等宽字体。

WebFonts CDN 服务

Cloudflare CDN

Cloudflare CDN 通用CDN服务，支持托管自定义字体文件并开启HTTP/2加速。结合中文网字计划的分包策略，可显著提升中文字体加载效率，尤其适合高流量网站。

Adobe Fonts（原Typekit）

Adobe Fonts 需订阅Adobe Creative Cloud，提供专业字体库及CDN分发，适合设计团队在商业项目中快速调用高质量字体。

独立字体

MiSans

MiSans 是小米公司于2021年推出的开源免费商用字体，最初作为MIUI 13系统的默认字体，现已成为全球语言字体项目MiSans Global的核心成员。其设计以简约清晰、人文易读为原则，覆盖20多种书写系统、600+语言、10万+字符，支持简体中文、繁体中文（港台字形）、拉丁文、日文等多语言场景。

CDN链接示例：

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,600:Chinese_Simplify,Latin" />  
<style>  
  :root {  
    --font: "MiSans", -apple-system, sans-serif;  
  }  
</style>

mozilla-type-family

mozilla-type-family 由 Studio DRAMA 为 Mozilla 定制的字体系列。Mozilla 字体系列有两种风格--Mozilla Headline 和 Mozilla Text。

总结

免费商用字体和 WebFonts CDN 的结合，既能满足版权合规需求，又能提升用户体验。对于中文项目，推荐猫啃网和自由字体；国际化和开发场景优先选择Google Fonts和ZeoSeven Fonts。若需进一步优化加载速度，可结合CDN服务如ZeoSeven CDN或Cloudflare。使用时务必仔细阅读授权条款，避免法律风险。

开发者需根据项目类型（静态/动态、中英文比例）选择工具链，并优先采用 WOFF2 格式压缩及 HTTP/2 加速，以最大化用户体验。

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程（20240915更新）

风记星辰
2024年9月15日 20:50
原文

由于微软雅黑的设计太过老旧，所以很多网站在设置font-family字体家族时，都会首先引入苹果的苹方字体（PingFang SC）。一来为了照顾 MAC，二来可以改善 Windows 上显示效果（已安装苹方字体的前提）。现在，一些厂商会在官网上引入自己研发的字体。感谢各大厂商没有禁止 woff 字体文件跨域使用，可以让我们白嫖，因为你们的字体是真的漂亮，并且以下字体可以个人免费使用。

更新说明

20240915 更新说明
1. 去除失效链接
2. 增加 MiSans 可变字体链接
3. 增加快看世界体

20230606 更新说明
1. 增加了阿里妈妈系列三款字体：方圆体/灵动体/刀隶体 web 引用链接

20230405 更新说明
1. 增加了钉钉进步体、阿里妈妈东方大楷 web 引用链接

20230312 更新说明
1. 增加了钉钉进步体和斗鱼追光体文件下载链接，但暂未有 web 引用链接
2. 标注华康金刚黑授权性质，请谨慎使用
3. 优化排版

20230306 更新说明
1. 增加了阿里妈妈数黑体 cdn 链接
2. 标注 CDN 公开性质
3. 优化部分说明文案
4. 优化排版

20221123 更新说明
1. 2022 年 11 月 17 日发现 OPPO 字体 – MasterGo 网站已关闭跨域请求，链接仅供下载使用了。
2. 增加了 unicode-range 优化说明

字体列表及引用链接

专题站点

服务商链接
Googlehttps://fonts.google.com（需 VPN）
Adobehttps://fonts.adobe.com（需授权）
阿里巴巴https://fonts.alibabagroup.com
钉钉进步体https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl
斗鱼追光体https://www.douyu.com/topic/douyuZGT
快看世界体https://www.kuaikanmanhua.com/webs/fontPromotion
Mi Sanshttps://hyperos.mi.com/font/zh/
HarmonyOS Sanshttps://developer.huawei.com/consumer/cn/design/resource-V1
OPPO Sanshttps://open.oppomobile.com/new/developmentDoc/info?id=13223

网页引入

字体名称服务商字重链接
Noto SansGoogle可变https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap
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
HarmonyOS SansB 站400https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
500https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css
OPPO Sans#1OPPO400https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
500https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
华康金刚黑#2字节跳动400https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap
500https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap
  1. OPPO 的在线引用 WOFF2 截取了 5000 字，因此在一些不常用的字上回出现不显示的情况
  2. 华康金刚黑实际和苹方是一个字体，因此需要授权才可使用。虽然 cdn 是可以跨域使用，但请谨慎。

引入字体

上述字体列表链接中，若是 css 链接可直接引用，若是 woff 字体链接需在你的 css 文件中引入。具体方式见下：

CSS

方式 1	在 html 中直接引入：<link rel='stylesheet' href='链接.css'>
方式 2	在 css 中引入：@import url('链接.css');

WOFF2

在 css 中引入
@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: OPPO-Sans;
	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;
	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 字重时

情况二

例如下述两个不同字重文件使用不同字体名称，在引入字体时也设置了不同的字重和链接：
@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-weight 的值都必须要与实际的字体字重文件匹配。若使用不同的字体名称，一方面增加代码工作量，另一方面还不易解读。因此，通过两个字重的使用方式，如果从便于管理的角度来看，情况一更为方便。

font-display swap 说明

你会发现很多引入字体的文件都会标注这个属性，它的作用是在没有加载出字体前，优先加载本地字体进行渲染，避免网页出现空屏。若您想了解关于该部分的研究资料及加载字体所带来的影响，推荐您查看该文章《知乎：一种减少字体加载影响的新方法：CSS 字体描述符(译)》

unicode-range 优化说明

当你引入官方的 css 字体链接后，有些文件里的一个 unicode-range 属性引起了你的注意，这个属性的作用是规定不同的字符加载不同字符集文件。通俗讲我们会把一个字体分成多个字符集，然后按需加载。例如一个页面只有 500 个字，但是这 500 个字恰好都在一个字符集里面，那么其他的字符集就不需要加载，换句话说就不需要加载整个字体文件，因此节省了流量和优化了加载速度。

使用该优化方式的上述链接中有：思源黑体（谷歌）、小米字体（小米）、鸿蒙字体（B 站）、华康金刚黑（字节跳动）

字体文件格式

本文一律使用 woff2 字体格式，在如今浏览器趋于 Chromium 内核的潮流下，作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式，推荐您查看《知乎：关于字体格式》

结语

就 windows 上的清晰效果而言，无论你使用何种字体，都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后，你会发现苹方字体的显示效果也十分漂亮，这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体，也会在 Windows 上大放异彩。

❌
❌