CSS中文乱码主因是编码链路断裂：@charset必须位于文件最开头（无BOM、空格、注释），服务器需返回Content-Type: text/css; charset=utf-8，HTML中link标签charset属性仅兼容旧IE，字体名及中文路径须加英文双引号。
引入 CSS 时 @charset 放错位置导致中文乱码
浏览器只认 CSS 文件开头的 @charset，且必须紧贴文件首字节（BOM 后、空格/换行前）。放错位置或加了注释，它就直接被忽略，浏览器按默认编码（通常是 ISO-8859-1）解析，中文全变 。
-
@charset必须是 CSS 文件最开头（不能有空行、注释、空格），例如：@charset "UTF-8";\nbody { font-family: "微软雅黑"; } - 用 VS Code、Sublime 等编辑器保存时，选 “UTF-8 无 BOM” —— 有 BOM 时部分旧浏览器（如 IE）会把 BOM 当作非法字符，导致整个 CSS 不加载
- 如果用构建工具（Webpack/Vite），CSS 被合并或注入，
@charset很可能被吞掉或错位，这时别依赖它，改用 HTML 的<meta charset="UTF-8">+ HTTPContent-Type: text/css; charset=utf-8双保险
CSS 中文路径或字体名没加引号引发解析错误
当 @font-face 的 src 指向含中文的本地路径，或 font-family 值是中文名（如 "思源黑体"），不加引号会让 CSS 解析器截断字符串，轻则字体不生效，重则整条规则失效。
- 所有含空格、中文、特殊符号的
font-family值必须用英文双引号包裹：font-family: "霞鹜文楷", "Microsoft YaHei", sans-serif; -
@font-face中的srcURL 含中文路径时，同样要加引号：src: url("fonts/站酷小薇体.woff2"); - 更稳妥的做法是：字体文件和路径全部用英文命名，避免依赖引号和编码处理 —— 这不是妥协，是减少部署时的不可控变量
HTTP 响应头 Content-Type 缺失或值错误
即使 CSS 文件本身是 UTF-8，如果服务器返回的响应头里没有 Content-Type: text/css; charset=utf-8，或写成 charset=gbk，浏览器就会按错误编码读取内容，中文注释、字体名、伪元素内容全崩。
- 检查方式：打开 DevTools → Network → 找到 CSS 请求 → 查看 Response Headers 中的
Content-Type - 常见错误值：
text/css（缺 charset）、text/css; charset=iso-8859-1、application/x-css—— 全部要修正 - Nginx 配置需显式设置：
add_header Content-Type "text/css; charset=utf-8";；Apache 用AddType "text/css; charset=utf-8" css - 本地开发用
file://协议时，浏览器不发请求头，完全依赖文件自身@charset和编码格式，所以此处最容易出问题
HTML 中 <link> 标签没声明 charset 属性（仅限老浏览器）
IE8 及更早版本不识别 CSS 文件内的 @charset，只认 <link> 标签的 charset 属性。虽然现在基本不用兼容，但内网老旧系统或遗留项目仍可能踩坑。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<link rel="stylesheet" href="style.css" charset="utf-8">—— 注意是小写utf-8，大写或带横线（UTF-8/utf_8）在某些旧 UA 下会失效 - 现代浏览器（Chrome/Firefox/Edge/Safari）完全忽略该属性，所以它只起“保底”作用，不能替代前面三项
- 如果项目明确不支持 IE8，这条可跳过；但如果打包工具自动注入
<link>（如 HtmlWebpackPlugin），确认它没删掉这个属性
@charset 位置、HTTP 头、HTML 标签属性 —— 四者只要一个没对上，中文就立刻失联。逐项核对比猜“是不是字体坏了”快得多。 
