2

我正在处理的网站遇到一个小问题。我正在使用Fonts.com的字体服务来提供我在网站上使用的 CSS 和 Web 字体，除 Internet 外，一切都运行良好。该页面似乎使用正确的字体呈现，但加载完成后，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 提供了一个门户网站来指定 CSS 中的字体，这些字体是从他们的服务器提供的——所以我不能轻易地编辑它。不过，我可以font-family使用网络字体编辑元素的属性。如果需要更多信息，我会尽可能提供。

编辑：这不是一闪而过的无样式内容，它从可能是缓存的内容中正确呈现，然后（在重新下载文件后）丢弃自定义字体并在页面完成加载时将其替换为默认字体。这与我和其他人所期望的相反，因此在此处发布以进行修复。

4

5 回答 5

0

所以对我来说，这是一个本地问题。

当我们部署到临时服务器时，字体在 IE 7 和 8 中正确显示。

仍然不知道为什么它们没有出现在本地，但至少它在生产中有效。

于 2012-04-06T14:18:00.900 回答
0

您看到的闪烁是 fouc 或 fout，我假设您使用的是 IE9，它会在加载网络字体时以默认字体显示文本 - 即使在兼容模式下也是如此。

@font-face { font-family: '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 字体用来修复 flash；我不确定你是否需要为你的代码调整它，但你可以在 github https://github.com/typekit/webfontloader

于 2011-10-19T17:42:02.990 回答
0

在我们的项目中，我们发现当我们打开开发人员工具时，在 Internet Explorer 中加载页面后，Web 字体会恢复。我们仍然需要不时提醒自己这一点，但这就是为什么您可能会看到这种奇怪的行为发生在本地而不是在生产中。

它肯定不会在每次页面加载时发生，但在我们手动刷新页面时会更频繁。我们尚未找到有关此行为的文档，但在运行 IE 10 尤其是 IE 11 时在多台计算机上体验过。

于 2014-10-03T16:43:13.213 回答
0

我的字体在本地 IE8 中正确显示。也适用于 chrome 和 FF。

字体在生产中失败。我正在使用 fontawesome 来引导 twitter。

我发现一旦页面被加载，如果我选择整个页面，那么所有加载的字体都会出现。所以它们在那里，但是一旦页面加载，IE8 就会忽略。我检查了怪癖模式和所有其他组合。

在“与其他 CSS 相关的”问题中，这绝对是“加载时”到“加载速度”的问题。在代码中将 CSS 链接重新定位得更高或更低会产生影响——尽管没有明确的解决方法。

如果页面完成后我可以“重新设置”加载的字体，那就太好了。

于 2013-01-16T18:18:30.583 回答
0

我有同样的样式内容闪现问题，对我来说，原因有两个：

  1. 我在本地安装了字体
  2. 我为网络字体使用了错误的 URL

所以在加载 webfont 之前，Explorer 提供了本地版本。然后它尝试使用错误的 URL 加载字体，但没有成功，导致它回退到标准的无衬线字体。

于 2014-10-07T03:28:01.250 回答