根本原因是浏览器未正确识别字符编码，将utf-8字节流误按gbk等编码解码，产生u+fffd替换符（显示为小方块）；需确保html中位置正确、文件保存为utf-8且无bom，并与http响应头content-type中的charset一致。
为什么中文会显示成小方块
根本原因不是字体缺失，而是浏览器根本没正确识别字符编码，把 UTF-8 字节流当成了其他编码（比如 Windows 默认的 GBK）去解码。结果就是每个中文被拆成两个乱码字节，渲染成 或小方块 —— 这是 Unicode 替换字符（U+FFFD），表示“我读不懂这个字节序列”。
<meta charset> 必须写对位置和写法
HTML5 只认一种标准写法：<meta charset="UTF-8">，且必须放在 内、任何其他标签（包括 <title></title>）之前，最好紧贴 开始。
- 错：写成
<meta charset="utf8">（少横线，部分旧浏览器不认） - 错：写在
<title></title>后面，或嵌在<script></script>里 - 错：写两遍，或和
<meta http-equiv="Content-Type">混用 - 对：只写一次，且是
<meta charset="UTF-8">，全部大写 U、T、F、8
文件保存编码必须和 <meta> 一致
VS Code、Sublime 等编辑器保存 HTML 文件时，编码选错会导致元数据和实际字节不匹配。即使写了 <meta charset="UTF-8">，文件本身是 GBK 编码，浏览器照样乱码。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- VS Code：右下角点击编码名称 → 选
Save with Encoding→ 选UTF-8（不要选UTF-8 with BOM，BOM 在 HTML5 中非必需，还可能干扰某些服务端逻辑） - 确认方法：终端执行
file -i filename.html或xxd -l 8 filename.html，看开头没有ef bb bf - 特别注意：从 Word、微信公众号后台、Notion 复制粘贴内容时，极易混入 Unicode 空格（如
\u200b、\u2028），这些字符在非 UTF-8 环境下也常渲染为小方块
HTTP 响应头 Content-Type 优先级更高
当页面通过 HTTP 协议加载（即地址栏是 http:// 或 https://），服务器返回的 Content-Type 响应头（如 text/html; charset=gbk）会直接覆盖 <meta charset>，导致后者完全失效。
- Nginx 配置需加：
add_header Content-Type "text/html; charset=utf-8";（注意不能重复加，否则报错） - Apache 需确保
AddDefaultCharset UTF-8已启用 - 本地双击打开（
file://协议）时，响应头不存在，此时才真正依赖<meta charset> - 验证方式：F12 → Network → 刷新 → 点 HTML 请求 → 查看 Response Headers → 找
Content-Type
最容易被忽略的是三者不同步：编辑器存的是 UTF-8，<meta> 写的是 UTF-8，但 Nginx 默认发的是 charset=iso-8859-1 —— 这时候改哪一项都白搭，必须统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
