为什么@charset必须放在CSS文件第一行
因为CSS规范明确规定：@charset规则仅在文件开头、且前面不能有任何字符（包括BOM以外的空白、注释、换行）时才被浏览器识别。一旦前面有空格、/* 注释 */或空行，整个声明就失效——浏览器会退回到默认编码（通常是系统locale，Windows下常为GBK），导致中文路径、content值或字体名全部乱码。
常见错误现象：
– 在VS Code里右键“Save with Encoding”选了UTF-8，但没勾“with BOM”，保存后文件开头仍是纯UTF-8无BOM，而@charset又写在第二行；
– 用AI生成CSS时自动加了注释头，把@charset "UTF-8";挤到了第二行；
– 用Webpack构建时，多个CSS合并后@charset被拼到中间，彻底失效。
- 打开CSS文件，用十六进制编辑器或VS Code的“Show All Characters”确认第一字节是否为
EF BB BF（UTF-8 BOM）；没有BOM时，@charset就是唯一可靠手段 - 务必手敲，不要复制粘贴——某些编辑器会悄悄插入零宽空格（
\u200b） - 写完立刻检查：在Chrome开发者工具的“Sources”里点开该CSS，看顶部是否显示“
@charset "UTF-8";”高亮，且无报错
路径含中文时，@charset能解决问题吗
不能。路径里的中文（比如url("图标-首页.css")或@import "组件/按钮.css";）是否乱码，和@charset无关。它只影响CSS文件自身的文本解析，不干预URL字符串的编码逻辑。
真正起作用的是：浏览器对URL中非ASCII字符的编码行为 + 服务器返回的HTTP Content-Type头。如果服务器返回Content-Type: text/css; charset=gbk，哪怕CSS文件里写了@charset "UTF-8"，浏览器仍会用GBK解码整个文件，路径里的中文照样变%E5%9B%BE%E6%A0%87-%E9%A6%96%E9%A1%B5.css再404。
立即学习“前端免费学习笔记（深入）”；
- 优先改路径：把
"图标-首页.css"改成"icon-home.css"，彻底规避问题 - 若必须保留中文路径，确保Web服务器（如Nginx）配置
charset utf-8;，且不覆盖CSS响应头 - 本地
file://协议下@charset无效——此时全靠浏览器按<meta charset>或系统编码猜，基本不可控
@charset和HTML的<meta charset>冲突怎么办
不会冲突，但有优先级：当CSS通过<link>引入时，浏览器以HTTP响应头的Content-Type中的charset为最高优先级；其次才是CSS文件内的@charset；<meta charset>只作用于HTML文档本身，对CSS文件无任何影响。
典型误判场景：
– HTML里写了<meta charset="UTF-8">，但Nginx给CSS返回了charset=gbk，结果CSS里中文全乱，还误以为是meta没写对；
– 开发时用Vite本地服务一切正常（默认发UTF-8头），上线到旧Apache服务器后突然乱码，其实是服务器配置漏了AddDefaultCharset UTF-8。
- 用Chrome DevTools → Network → 点开CSS请求 → Headers → Response Headers，直接看
Content-Type值 - 如果看到
charset=gbk或charset=iso-8859-1，问题100%在服务器，改@charset没用 - Webpack项目需检查
css-loader配置，老版本默认不指定encoding，可能按Node.js进程locale读取文件（Windows下即GBK）
哪些情况根本不能依赖@charset
三种典型失效场景：HTTP头强制覆盖、构建工具预处理、字体图标Unicode映射错误。这时候修@charset只是白费功夫。
比如用@font-face引入本地字体，src: url("黑体.ttf");路径正确，但字体名font-family: "黑体";显示为方块——这不是编码问题，而是字体文件本身不含对应字形，或系统未安装该字体。又比如PostCSS插件postcss-import在解析@import时，若未显式配置encoding: 'utf8'，会用默认编码读取被导入文件，导致嵌套CSS乱码，此时父文件的@charset完全不起作用。
- 字体图标乱码：先查Network里字体文件是否200，再用
fontdrop.info验证.ttf文件里是否有对应Unicode码位 - Vite项目中
@import嵌套CSS乱码：确认vite.config.ts里css.preprocessorOptions未误设编码 - 所有构建流程中，只要涉及文件读取（fs.readFile、rollup-plugin-css-only等），就必须显式传
encoding: 'utf8'，不能指望@charset穿透工具链
