Question

我对IE7有@font-face个问题。它将字符-显示为正方形see this screenshot。正常文本和其他特殊字符&，/和+等显示正确。

它在我测试过的所有浏览器中都能正常工作，甚至是IE8。

以前是否有人遇到此问题，并且可能知道解决方案？

我用来加载字体的CSS如下所示，我尝试使用text-transform:uppercase/lowercase来查看是否存在问题。

@font-face {
font-family: 'rex-bold';
src: url('fonts/rex_bold-webfont.eot');
src: url('fonts/rex_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/rex_bold-webfont.woff') format('woff'),
    url('fonts/rex_bold-webfont.ttf') format('truetype'),
    url('fonts/rex_bold-webfont.svg#rex_bold_bold') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

这似乎是Rex fonts的一个问题。它们不包含“ - ”HYPHEN-MINUS U + 002D（即常见的Ascii连字符）。这意味着浏览器必须从另一种字体中获取该字符。您可以从屏幕截图中看到连字符具有不同的设计 - 字母中的笔划更细。结果可能因浏览器及其设置而异，IE的旧版本在这里是非常糟糕的 - 它们甚至可能无法渲染角色，而是显示一个小矩形，即使系统中有字体覆盖它。 / p>

要解决此问题，请设置一些备用字体，例如

font-family: rex-bold, Tahoma, Verdana, sans-serif;

您可以选择字体，使其连字符与Rex Bold的设计相匹配。这可能不是完美的，但要小心，您可以在大多数浏览器上获得更好的渲染效果。

由于Rex Bold将所有字母设计为大写，因此连字符也应为大写字母。 Tahoma和Verdana可能会这样做。对于某些现代字体，您可以使用font-feature-settings（在浏览器前缀形式中）使用case属性在可用时选择此类变体字形。我编写了一个简单的test page来测试这些设置的效果。但是大多数字体缺乏这么好的功能，所以你应该只选择连字符字形“足够高”（并且足够大胆）的字体。

IE7将@ font-face字符“连字符”显示为正方形

1 个答案: