Fredoka粗体数字3文字描边未填充，求排查与解决方法

问题根源 #

这是字体本身的轮廓设计问题，和CSS无关。Fredoka 700粗体的数字3矢量轮廓存在路径闭合不严谨的情况，当CSS的-webkit-text-stroke基于字体轮廓生成描边时，就会出现这个缺口。

修复方法（不用更换字体） #

方法1：用text-shadow模拟描边（最简便）

放弃-webkit-text-stroke，改用多层text-shadow模拟描边效果——阴影是扩散覆盖式的，不会受字体轮廓缺口影响。修改后的CSS如下：

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');

body {
  font-size: 150px;
}
p {
  color: lime;
  font-family: "Fredoka";
  margin: 0;
  /* 替换原text-stroke，多层阴影模拟粗描边 */
  text-shadow: 
    0.15em 0.15em 0 #000,
    -0.15em 0.15em 0 #000,
    0.15em -0.15em 0 #000,
    -0.15em -0.15em 0 #000,
    0.15em 0 0 #000,
    0 0.15em 0 #000,
    -0.15em 0 0 #000,
    0 -0.15em 0 #000;
}

方法2：修改字体轮廓（彻底解决）

如果想保留text-stroke的原生效果，可以下载Fredoka字体文件，用FontForge、Glyphs这类字体编辑工具打开，找到数字3的字形，手动闭合轮廓缺口，再重新生成字体文件替换项目中的字体引入。这个方法需要一点字体编辑基础，但能从根源解决问题。

方法3：调整paint-order（效果有限）

试试把paint-order改成fill stroke，让填充色先绘制再覆盖描边，可能会填补小缺口，但对Fredoka这个字体的数字3来说效果不一定理想，可尝试：

paint-order: fill stroke;

内容的提问来源于stack exchange，提问作者Troxi