2

我的IE7有@font-face问题。它将字符显示-为正方形，请参见此屏幕截图。正常文本和其他特殊字符如&,/等+可以正常显示。

它在我测试过的所有浏览器中都能正常工作，甚至是 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;
}
4

1 回答 1

2

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

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

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

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

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

于 2012-10-19T10:27:57.073 回答