css - 本地字体因 Chrome 和 FireFox 更新而中断

Question

早上好!

我和我的团队昨天大部分时间都在试图弄清楚为什么当我昨天早上启动服务器时，我正在工作的网站上的所有字体都显示 Times New Roman。该站点是使用 Eclipse Workspace 使用 JSF 编写的，因此我们起初认为这是 Workspace 的问题，因为该站点为我的一位同事正确显示。

在花费数小时重建和调试 Workspace 后，我们得出结论，要么是代码问题，要么是浏览器问题。我花了大约一个小时查看代码，但找不到任何会导致我们出现问题的问题，因此我们断定是浏览器问题。那时我的一位同事建议网站显示正常的人更新到最新版本的 Chrome - 这导致字体损坏。

最新版本是:38.0.2125.104。

嵌入字体的代码如下所示(JSF 资源标签只是从库中呈现一个 HREF):

@font-face { font-family: 'aleoregular';

src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.eot']});
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.woff']}) format('woff'),
     url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.ttf']}) format('truetype'),
     url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.svg']}) format('svg');
font-weight: normal;
font-style: normal;

或者，在没有 JSF 的情况下，它在 CSS 中看起来像这样:@font-face {

font-family: 'sinkin_sans600_semibold';
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot');
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.woff') format('woff'),
     url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.ttf') format('truetype'),
     url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.svg#sinkin_sans600_semibold') format('svg');
font-weight: normal;
font-style: normal;

在 Firefox 的控制台上，我收到此错误:“可下载字体:FTTM:未对齐的表格(字体系列:....)”

如有任何建议，我们将不胜感激。

Answer 1

没有明确的答案，但有些事情要尝试/检查......

我发现新的 Chrome 版本和字体没有问题。

您将获得时间字体(实际上是“serif”)，因为如果没有设置字体，这是浏览器的默认字体。

我认为您的网络字体是从本地服务器而不是互联网加载的，因此您可以检查这些字体文件是否存在并且没有损坏。即使它们来自某个地方的网络，下一步也是一样的......

在 Chrome 中，打开开发工具，您应该能够在网络面板中看到是否正在请求和提供字体文件。

为了良好的通话，当您点击网络通话时，Chrome 会在“预览”选项卡中显示提供的字体。如果您在那里什么也看不到，请检查响应 header 。您将需要 Content-Type 之类的 font/woff2 或 application/x-font-woff 或类似内容。

您还可以从网络面板中查看文件是否从缓存中获取。问题可能不是 Chrome 版本更改本身，而是升级清除了缓存，或者 Assets 自然地变成了缓存过期，现在正在尝试获取有问题的版本。

您是否可以 gzip 字体文件，例如现在，您以前不在的地方(反之亦然)？