网页和系统里怎么显示生僻字

适合谁看：网站、App 或文档里有生僻字显示成方框，想让它正常显示的开发者和设计师。

先确认是「缺字形」而不是「丢了字」

显示成方框，说明字还在，只是字体里没有；显示成问号，说明存储或传输时已经丢了，要先修编码。判断方法见《生僻字为什么打不出、显示不了》。

系统怎么补字

操作系统和浏览器都有「字体回退」机制：主字体里没有某个字时，会自动去其他已安装的字体里找。Windows 和 macOS 都自带一些覆盖扩展区的字体，所以同一个生僻字，在电脑上常常能显示，只是字体风格和周围不一样；在字体较少的设备（部分手机、嵌入式设备）上就可能是方框^[1]。

网页：在字体栈后面加一款「补字字体」

body {
  font-family:
    "主字体",              /* 你的正文字体 */
    "Plangothic P1",       /* 补字字体：覆盖扩展区 */
    "Plangothic P2",
    sans-serif;
}

要点：

• 补字字体放在主字体后面：主字体有的字用主字体，没有的才用补字字体；
• 字体名以实际文件为准：上例中的遍黑体分成 P1、P2 两个文件，名称请以下载的文件和项目说明为准^[2]；
• 用 unicode-range 按需下载：把补字字体的 @font-face 限定在扩展区码位，页面里没有这些字时浏览器就不会下载^[3]：

@font-face {
  font-family: "补字字体";
  src: url("/fonts/fallback-extb.woff2") format("woff2");
  unicode-range: U+20000-2A6DF, U+2A700-2EE5F, U+30000-3347F;
}

• 风格尽量接近：正文是黑体就配黑体风格的补字字体，避免一个字突兀；
• 注意许可：补字字体也要允许网页嵌入，见《自托管网页字体的许可要点》。

字体栈的一般写法见《中文字体栈怎么写》。

文档和设计稿

• Word、WPS 等会自动回退到系统字体；需要统一风格时，手动给生僻字指定一款有这个字的字体；
• 导出 PDF 时嵌入字体，接收方才能看到同样的字；
• 设计稿交给前端时，把用到的生僻字列出来，确认网页字体里有没有，见《从设计稿到上线：怎么和前端对接字体》。

用文风网页字体时

文风提供的网页字体以各款字体本身收录的字为准，没有收录的字会由你在字体栈里写的后备字体显示。所以生僻字多的页面，同样建议在字体栈后面加补字字体^[4]。网页字体的接法见《用文风网页字体：一页看懂正确接法》。

参考资料（4）

1. MDN：font-family
2. 遍黑体项目仓库，GitHub：Fitzgerald-Porthmouth-Koenigsegg
3. MDN：unicode-range（英文）
4. CSS Fonts Module Level 4：字体匹配算法，W3C