小方块是字体缺字与编码失配共同导致的问题，需按顺序修复：确保文件为UTF-8无BOM保存、清理源码中Unicode隐藏空格（如U+2000–U+200F）、补全CSS字体栈以支持广字符集。
空格显示为小方块是编码或字体缺失问题
这不是 HTML5 的 bug，而是浏览器在渲染时找不到能显示该空格字符的字体，或者当前文档编码与实际字节不匹配。最常见于 、 、 或直接粘贴进来的 Unicode 空格（如 U+2000–U+200F），尤其在 Windows 上用记事本保存为 ANSI 后再用 UTF-8 解析时极易触发。
检查并强制声明 UTF-8 编码
确保 HTML 文件开头有正确的 声明，且文件本身以 UTF-8 无 BOM 格式保存。缺少或错位的声明会让浏览器误判编码，把多字节空格当乱码处理。
- 必须放在
最前面，早于任何文本内容 - 推荐写法：
（HTML5 简写，兼容所有现代浏览器） - 不要写成
—— 冗余且易出错
避免不可见空格字符混入 HTML 源码
从 Word、微信、Notion 或某些编辑器复制内容时，常带入零宽空格（）、窄空格（ ）、甚至软连字符（）。这些字符在源码里看不见，但浏览器会尝试渲染，而多数中文字体不支持它们，就显示为小方块或空白方框。
- 用 VS Code 打开 HTML 文件，开启「显示不可见字符」：菜单
View → Render Whitespace或快捷键Ctrl+Shift+P → Toggle Render Whitespace - 搜索正则：
[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]，批量删掉非必要 Unicode 空格 - 粘贴富文本前，先粘到纯文本编辑器（如记事本）中中转一次，剥离格式和隐藏字符
CSS 中用 font-family 回退兜底字体
即使编码正确，若页面指定了不支持全角/排版空格的字体（比如只写了 "Microsoft YaHei"），浏览器也可能在渲染 这类空格时 fallback 失败。需显式加入支持广字符集的系统字体。
立即学习“前端免费学习笔记（深入）”；
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}
-
"Noto Sans CJK SC"和"Source Han Sans SC"是 Google / Adobe 提供的开源中日韩字体，覆盖全部 Unicode 空格区段 - Windows 用户若没安装这些字体，浏览器会继续 fallback 到系统默认中文字体（如微软雅黑），但要确保其版本较新（Win10+ 自带较完整支持）
- 避免只写单一中文字体名，例如
"SimSun"或"KaiTi"—— 它们对 Unicode 空格支持极差
