css - IE7 将@font-face 字符 "hyphen"显示为正方形

Question

我有一个 @font-face 的 IE7 问题。它将字符 - 显示为正方形，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 在这方面是出了名的糟糕——它们甚至可能根本无法渲染字符，而是显示一个小矩形，即使系统中有覆盖它的字体。

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

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

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

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