HTML在线编辑器（如CodePen、JSFiddle）不支持@font-face引用本地字体文件，唯一可靠方式是用<link>引入Google Fonts等网络字体服务，并确保URL含&display=swap、&subset=chinese-simplified等必要参数，且CSS中font-family名称须加引号、严格匹配。
HTML在线编辑器（如 CodePen、JSFiddle、CodeSandbox）**无法通过 @font-face 加载本地字体文件**，因为它们不托管你上传的 .woff2 或 .ttf 文件，相对路径会 404，file:// 和 data: URL 也基本被拦截或截断。唯一稳定可用的方式是用 <link> 引 Google Fonts 等公开服务，并严格校验参数。
为什么 @font-face 在在线编辑器里总失败
在线编辑器运行在隔离沙盒中，@font-face 的 url() 只能指向可公开访问的 HTTPS 地址。你拖进去的字体文件不会生成有效 URL，浏览器请求时直接返回 404。Network 面板里能看到字体请求标红，状态码是 404 或被 CORS 拦截。
-
@font-face声明了但字体没生效？大概率是src路径写成了./fonts/myfont.woff2—— 这个路径在编辑器里根本不存在 - 把字体 base64 编进
src: url(data:...)？JSFiddle 会过滤 data URL；CodePen 对长度敏感，超长直接截断 - 用
@import加载 Google Fonts CSS？它阻塞渲染，容易触发 FOIT（首屏白屏 2–3 秒）
<link> 引 Google Fonts 必须带的三个参数
不是加个 <link> 就完事。漏掉任意一个，中文显示为宋体、粗体失效、首屏文字消失都是常态。
- 必须用
<link rel="stylesheet">，别用@import - URL 必须含
&display=swap：否则浏览器默认font-display: block，文字等字体加载完才出现 - 中文字体（如
Noto+Sans+SC）必须加&subset=chinese-simplified，否则只下拉丁字母，中文 fallback 到系统字体 - 多个字重得写全，比如
wght@400;700;italic@400，漏了700就用不了粗体
正确示例（放在 <head> 里）：
立即学习“前端免费学习笔记（深入）”；
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified&display=swap" rel="stylesheet">
CSS 中调用时，font-family 值必须加英文双引号，且大小写、空格完全匹配：
body { font-family: "Noto Sans SC", sans-serif; }
错写成 font-family: Noto Sans SC, sans-serif; → 浏览器拆成三个独立名字 Noto、Sans、SC，全部查无此字体，直接退到 sans-serif。
想用自己下载的字体？只能本地开发环境配 @font-face
如果你有 Inter.woff2 或 HarmonyOS_Sans_Cn.woff2 这类文件，且在本地起服务（如 http://localhost:5173），那可以走标准 @font-face 流程：
- 字体文件和 CSS 文件放同级目录或子目录，路径按 CSS 文件位置算，比如 CSS 在
css/style.css，字体在css/fonts/，就写url('fonts/Inter-Regular.woff2') - 每个字重/样式单独写一条
@font-face，font-weight: 700和font-style: italic不能省 - 务必加
font-display: swap，否则用户可能看到空白再闪现文字（FOUT）或长时间白屏（FOIT） - 现代项目只需提供
woff2+woff降级，不用堆eot、svg，徒增体积
注意：format('woff2') 要写对，不然某些浏览器解析失败；CDN 托管字体时，响应头必须带 Access-Control-Allow-Origin: *，否则跨域报错。
在线编辑器的本质是“运行别人托管的 HTML/CSS/JS”，它不给你磁盘读写权，也不生成静态资源 URL。想验证字体是否真生效，最直接的是打开 DevTools → Elements → 选中元素 → Computed 面板看 font-family 计算值，不是看你写了什么，而是浏览器最终用了什么。
