页面加载完成后，Internet Explorer 中的 Web 字体将恢复
我正在处理的网站遇到了一个小问题。我正在使用 Fonts.com 的字体服务来提供我在网站上使用的 CSS 和网络字体，除了互联网之外，一切都运行良好。该页面似乎使用正确就位的字体进行渲染，但加载完成后，IE 会恢复为默认字体。
以下是 CSS 示例：
@font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}
@font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}
和典型用例：
body {
font-family: "DIN Next W02 Cond";
font-weight: normal;
font-size: 14px;
font-weight: normal;
}
p {
font-family: "HelveticaNeueW02-55Roma";
font-weight: normal;
font-size: 14px;
line-height: 1.5;
}
宽字体 是页面后显示的内容完成加载，同时在页面加载期间显示窄字体（正确的字体）。
有一个简单的解决办法吗？ Fonts.com 提供了一个 Web 门户来指定 CSS 中的字体，这些字体是从他们的服务器提供的 - 所以我无法轻松编辑它。不过，我可以使用网络字体编辑元素的 font-family 属性。如果需要更多信息，我会尽可能提供。
编辑：这不是一闪而过的无样式内容，它可以从可能是缓存的内容中正确呈现，然后（重新下载文件后）丢弃自定义字体并替换页面加载完成后，它会使用默认字体。这与我和其他人的预期相反，因此在此发布以寻求修复。
I'm running into a small issue with a site I'm working on. I'm using the font services from Fonts.com to serve up the CSS and web fonts I use on the site, and everything works well except in Internet. The page appears to render with the fonts correctly in place, but when the loading is complete, IE reverts back to the default font.
Here's a sample of the CSS:
@font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}
@font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}
and typical use cases:
body {
font-family: "DIN Next W02 Cond";
font-weight: normal;
font-size: 14px;
font-weight: normal;
}
p {
font-family: "HelveticaNeueW02-55Roma";
font-weight: normal;
font-size: 14px;
line-height: 1.5;
}
The wide font is what displays after the page finishes loading, while the narrow font (the correct font) is displayed during page load.
Is there an easy fix? Fonts.com provides a web portal to specify the fonts in the CSS, which they serve from their servers - so I can't easily edit that. I can edit the font-family property for elements using the web fonts, though. If any more information is needed, I'll provide it where possible.
Edit: this is not a flash of unstyled content, it renders properly from what is presumably the cache, then (upon re-downloading the file) discards the custom font and replaces it with a default font when the page is done loading. It's the reverse of what I and others are expecting, hence posting here for a fix.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您看到的闪烁是 fouc 或 fout，我假设您使用 IE9，它会在加载 Web 字体时以默认字体显示文本 - 即使在兼容模式下也是如此。
@font-face {
字体系列：'OpenSansLight'；
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') 格式('embedded-opentype'),
url('OpenSans-Light-webfont.woff') 格式('woff'),
url('OpenSans-Light-webfont.ttf') 格式('truetype'),
url('OpenSans-Light-webfont.svg#OpenSansLight') 格式('svg');
字体粗细：正常；
字体样式：正常；
这
是获得 @font-face 跨浏览器的最佳方式。如果您需要创建这些文件，请访问 fontsquirrel.com
typekit 和 google fonts 使用字体加载器来修复 Flash；我不确定你是否需要根据你的代码调整它，但你可以在 github 上获取它 https:// /github.com/typekit/webfontloader
the flicker you see is fouc or fout, im assuming your using IE9, it'll will display text in a default font while the web font loads — even in compatibility mode.
@font-face {
font-family: 'OpenSansLight';
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Light-webfont.woff') format('woff'),
url('OpenSans-Light-webfont.ttf') format('truetype'),
url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
that's the best way to get @font-face cross-browser. if you need those files created, head over to fontsquirrel.com
font loader is used by typekit and google fonts to fix the flash; i'm not sure if you'll have to tweak it for your code, but you can snag it on github https://github.com/typekit/webfontloader
所以对我来说，这是一个本地问题。
当我们部署到临时服务器时，字体在 IE 7 和 8 中正确显示。
仍然不知道为什么它们没有出现在本地，但至少它在生产中有效。
So for me, it was a local issue.
When we deployed to our staging server, the fonts displayed correctly in IE 7 and 8 .
Still don't know why they're not showing up locally, but at least it works in production.
我的字体在本地 IE8 中显示正常。也适用于 chrome 和 FF。
字体在生产中失败。我正在使用 fontawesome 来引导 twitter。
我发现一旦页面加载，如果我选择整个页面，那么所有加载的字体都会出现。所以它们就在那里，但是一旦页面加载，IE8 就会忽略它们。
我已经检查了怪癖模式和所有其他组合。
这绝对是“与其他 CSS 相关”中“加载时”到“加载速度”的问题。
在代码中重新定位 CSS 链接的位置较高或较低会产生影响 - 尽管没有明确的修复方法。
如果我可以在页面完成后“重新设置”加载的字体，那就太好了。
My fonts display properly in IE8 locally. Also works in chrome and FF.
The fonts fail in production. I'm using fontawesome for bootstrap twitter.
I find that once the page is loaded, If I select the entire page then all the loaded fonts appear. So they are there, but IE8 disregards once the page is loaded.
I've checked quirks mode and all other combinations.
It's definitely a "when loaded" to "speed of load" in "relation to other CSS" issue.
Re-positioning the CSS link higher or lower in the code has effects - though no clear fix.
It would be nice if I could "re-instate" the loaded fonts once the page was complete.
在我们的项目中，我们发现当我们打开开发人员工具时，Web 字体会在 Internet Explorer 中加载页面后恢复。我们仍然需要不时提醒自己这一点，但这就是为什么您可能会看到这种奇怪的行为发生在本地而不是生产中。
它肯定不会在每次页面加载时发生，但当我们手动刷新页面时会更频繁。我们尚未找到有关此行为的文档，但在运行 IE 10（尤其是 IE 11）时在多台计算机上遇到过这种情况。
On our project we identified that web fonts would revert after page load in Internet Explorer when we had the developer tools open. We still have to remind ourselves of this from time to time, but this is why you might see this odd behavior occur locally but not in production.
It definitely does not happen on every page load, but is more frequent when we manually refresh pages. We have not found documentation for this behavior but have experienced it on multiple computers when running IE 10 and especially IE 11.
我遇到了同样的样式内容闪烁问题，对我来说，原因有两个：
因此在加载 Web 字体之前，资源管理器提供了本地版本。然后它尝试使用不正确的 URL 加载字体，但这不起作用，导致它回退到标准的无衬线字体。
I had the same problem of flash of styled content and for me, the cause was two-fold:
So before the webfont loaded, Explorer served up the local version. It then tried to load the font with an incorrect URL, which didn't work, which caused it to fall back to a standard sans-serif font.