html - Woff 导致丢失字母

Question

我收到了一组带有一组 woff 文件的 html 文件。

由于某种原因，字符“%”在文本中不可见，如第一个屏幕截图所示。

如果我摆弄 css 并删除 font-family 属性（它指向嵌入的字体），那么 '%' 字符再次可见

当然这不是我期望的字体。

我想知道是什么导致了这个问题？我该如何解决这个问题？

编辑：

底层的html是这样的：

<pre class="g3" style="left:9.3px;top:0.7000061px;">Up to 50% of water</pre>

以及对应的css类

Answer 1

如果字形未显示，则字体要么以某种方式损坏，要么字形实际上不在字体中。让我们检查：

通过TTX运行 WOFF ，并查看是否有 cmap 条目和字形轮廓，用于%. 如果有： % 应该渲染，但没有。由于出现问题，重新生成 WOFF。

如果甚至没有 的条目%，那么您有三个选择：

1. 寻找新字体，或
2. 从保证有的来源重新生成 WOFF %，或
3. 保持原样，但添加一个 CSS 后备，以便%由不同的字体呈现。

不过，我会先创建一个新的 WOFF。找到原始的 otf 或 ttf 源，将其用作 font-family 以验证它是否有效，如果有效，则将其转换为 WOFF 并禁用压缩（这不会更改字体的数据，它只是添加一个元数据块）并查看是否这样可行。如果是这样，请尝试使用 WOFF进行压缩（它不会修改字体数据，但会压缩其中的一部分，因此理论上它会更小），看看它是否仍然有效。

另请注意，您不需要为 webfonts 使用 WOFF，原始的.ttf和.otf在现代浏览器中工作得很好。唯一的问题是 IE，它实际上通过要求字体的权限表明它是“可安装的”而不是“可嵌入的”来做正确的事情，所以：看看普通的 ttf/otf 是否按预期工作，如果是，检查字体是否在 IE 中工作。

可以？完成后，我们不需要 WOFF，直到您有证据证明您需要优化您的 webfont 有效负载，因为它的大小会干扰用户采用。