更新Google字体后,IE11将所有文本显示为粗体

时间:2017-12-21 21:17:51

标签: css angular internet-explorer fonts google-fonts

背景:在内部网络应用中,我使用的是Google字体Open Sans。我已经下载了字体文件并与应用程序捆绑在一起(应用程序必须脱机工作)。最近我注意到Google有一个较新版本的字体,此时我重新下载并在应用程序中更新了它。此时我还改变了我在CSS中包含字体的方式,将其删除为仅使用.woff和.woff2格式(仅需要支持IE11和Chrome)

问题:由于我们测试服务器上自己的计算机上的此更新,仅在IE中,所有文本都显示为粗体。在Chrome中它很好。在IE中使用localhost在我的本地副本中查看它时,字体工作正常。在其他计算机上它一直工作正常。到目前为止,我只看到另一台计算机有同样的问题。

如果我检查元素,则将其正确设置为使用font-weight: 400并正确使用.woff文件用于IE11。它似乎只是使用粗体版本的字体而不是常规版本。

我担心这会发生在我客户的电脑上,因为我知道它不仅仅是我的电脑。

代码:以下是我用来导入字体的代码。我和之前的唯一区别是我不再导入SVG和其他格式。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff?v=1.5.0) format('woff');
}

更多细节: Web应用程序使用Angular 5(使用Angular CLI),SASS,并通过Tomkins Windows服务器上的Jenkins部署。测试服务器当前正在开发模式下运行。

我已经尝试清除浏览器中的所有缓存并多次重新启动计算机,但没有任何修复它。

我很遗憾无法链接到应用,因​​为它只是内置的。

以下是在测试服务器上以及在localhost上查看时的差异的屏幕截图:

app-comparison

我认为这可能是许多事情的结果,所以如果我需要提供更多信息,请告诉我。

0 个答案:

没有答案