html在线运行环境不支持@font-face引用本地字体文件，唯一可靠方式是用引入google fonts等网络字体服务，需确保url参数完整、font-family加引号、显式声明字重与子集。
为什么 @font-face 在在线运行平台基本失效
在线编辑器运行在沙盒环境中，@font-face 的 url() 只能指向**HTTP(S) 可公开访问的路径**，不能是 ./fonts/myfont.woff2 这类相对路径——那会 404。你上传的字体文件不会被托管为静态资源，也不会生成可用 URL。
- 常见错误现象：
Failed to load resource: the server responded with a status of 404 ()，Network 面板里字体请求标红 - 即使你把字体 base64 编码塞进
src: url(data:...)，部分平台（如 JSFiddle）会过滤 data URL 或限制长度 - 别试
file://或绝对本地路径——浏览器直接拒绝加载，控制台报CORS或Not allowed to load local resource
正确做法：用 引 Google Fonts（含中文）
这是目前最稳定、零配置、跨平台通用的方式。关键不是“怎么写”，而是**参数一个都不能少**：
- 必须用
<link rel="stylesheet">，别用 CSS 里的@import（阻塞渲染，易 FOIT） - URL 必须带
&display=swap，否则首屏文字白屏 2–3 秒（默认font-display: block） - 中文字体（如
Noto+Sans+SC）必须显式加&subset=chinese-simplified，否则只加载拉丁字母，中文仍 fallback 到系统字体 - 多个字重/斜体要写全，比如
wght@400;700;italic@400，漏了就用不了粗体或斜体
示例（放在 HTML 的 里）：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified&display=swap" rel="stylesheet">
然后 CSS 里直接用：
body { font-family: "Noto Sans SC", sans-serif; }
注意："Noto Sans SC" 必须加英文双引号，空格和大小写都要跟 Google Fonts 页面上显示的一致。
font-family 写法错误会导致字体完全不生效
很多问题其实卡在最后一步：CSS 里没写对名字。浏览器根本找不到你声明的字体族，只能退到 sans-serif。
- 错误写法：
font-family: Noto Sans SC, sans-serif;→ 解析成三个独立字体名Noto、Sans、SC，全部失败 - 正确写法：
font-family: "Noto Sans SC", sans-serif;或font-family: 'Noto Sans SC', sans-serif; - 英文无空格字体（如
Inter）可以不加引号，但加了更安全；有连字符（如IBM+Plex+Sans）也必须加引号 - 如果用了
font-weight: 700却没在 Google Fonts URL 里声明wght@700，浏览器不会自动加粗，而是 fallback 到 normal 字重的字体
想测字体是否真加载成功？用 document.fonts.load()
在线环境调试时，光看样式没用。加一段 JS 检查实际加载状态：
document.fonts.load('16px "Noto Sans SC"').then(() => {
console.log('字体已就绪');
}).catch(err => {
console.warn('字体加载失败', err);
});
这个方法比看 Network 更准——它确认的是字体**可被渲染使用**，而不仅是 HTTP 请求完成。如果控制台输出失败，优先检查 URL 参数、引号、子集是否匹配。
真正容易被忽略的是：Google Fonts 的 display=swap 只作用于它自己返回的 CSS 规则；如果你混用了 @font-face 声明其他字体，那个块里还得单独写 font-display: swap，不能指望一个参数全局生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
