Question

我正在使用Open Sans字体作为正文文本，使用Font Squirrel生成的EOT，SVG，WOFF和TTF字体文件和样式表。我首先在页面标题中包含了我的字体CSS。但是当我在IE7，IE8甚至是IE9中查看该网站时，我会在Open Sans开始之前获得Times Roman中的所有内容。这在其他浏览器中不会发生。

任何人都可以建议我可以阻止这种情况发生吗？这是我用于该字体的Font Squirrel CSS：

 @font-face {
    font-family: 'OpenSansRegular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

上述代码中未定义下载自定义字体时看到的内容。它在您的CSS代码中的其他font-family指令中定义。

在“OpenSansRegular”值之后添加其他字体，以逗号分隔。从右到左：

在右侧，您的字体系列。 serif，sans-serif，monospace或cursive（ yay Comic Sans！）。在这里，OpenSansSth是...... sans-serif 您的浏览器有这些系列的默认值，Arial，Verdana或Linux中的其他字体，无论如何。当你不为他选择时，这是用户的选择。默认系列为serif，Windows中的默认字体为“Times New Roman”。这就是为什么你把Times New Roman视为IE中的FOUC。
然后是一个尽可能接近自定义字体的网页安全字体。这里它是一个像Verdana或Arial的无衬线字体。也许sans-serif和Verdana会是一样的但是你永远不会确定（特别是Linux用户），所以加上
在您的自定义字体和网页安全字体之间，您可以添加可安装在相当多的操作系统中的字体，但不像安装了MS Office，Adobe Reader，OS X，Adobe Creative Suite等的网页安全。您可以在10％到90％的访问者计算机中找到它们，但不是100％。并非所有人都安装Creative Suite（仅限Web专业人员和其他设计人员）和MS Office（我使用LibreOffice），并且在XP，Vista和7中安装了不同的字体
最后，最左边的值将是您为自定义字体指定的自定义名称。您网站中的OpenSansRegular

例如：

         nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif;
         }

兼容性表格与百分比（可能有点旧）http://www.codestyle.org/css/font-family/
不要使用10个值，3到6个就足够了;）2012年@ font-face可能会导致渲染问题，具体取决于浏览器和操作系统（别名），但它得到了很好的支持，因此您可以缩短字体系列。

Answer 2

隐藏@font-face的FOUC的jQuery插件可以在这里找到：How to know if a font (@font-face) has already been loaded?从这个线程中删除了代码块，因为我在那里更新了它。

使用@ font-face在IE中删除无格式内容

2 个答案: