【问题标题】:CSS Webfont not rendering missing characterCSS Webfont 不呈现丢失的字符
【发布时间】:2025-12-22 08:40:06
【问题描述】:

我在一个 Web 项目 (http://www.google.com/fonts/specimen/Quicksand) 中使用“流沙”字体,但我遇到了一个问题:该字体不存在 ² 字符。我认为它会以其他字体呈现(在 font-family 属性中的 Quicksand 之后编写),但事实并非如此。当我写 ² 时,唯一呈现的是一个空白。

有没有办法用其他字体渲染不支持的字符?

这是使用的 CSS:

font-family: "Quicksand", Helvetica, Arial, sans-serif;

【问题讨论】:

  • 将该字符包装在一个 span 中并应用其他字体系列。

标签: css fonts


【解决方案1】:

流沙字体有一个错误:对于 Unicode 代码位置 U+00B2,SUPERSCRIPT TWO,它有一个空字形。它是 396 个单位宽,因此它比字体中的普通 SPACE(300 个单位)宽。另一个有类似问题的字符是 U+201A SINGLE LOW-9 QUOTATION MARK “‚”,它有一个 230 单位宽的空字形。

原则上,您可以通过在@font-face 规则中使用unicode-range 来指定从不同字体中获取特定字符来规避该错误。但是,浏览器支持仍然太有限(并且该方法需要您托管字体文件,而不是从 Google 服务器使用它们)。

另一种可能性是编辑字体。这需要字体编辑器和版权所有者的许可(当然还有您托管字体文件)。

第三种选择是将每次出现的“²”包装在带有类的span 元素中,并在它们上适当地设置font-family。请注意,这意味着混合使用不同字体的字形,在良好的排版中应避免这种情况。

最后,考虑使用不同的字体。 SO上有几个关于流沙字体渲染问题的问题。

【讨论】:

  • 感谢您的长篇回答。最后,我唯一的选择是更改输入/选择/文本区域元素的字体...
最近更新 更多