0

背景:在一个内部网络应用程序中,我使用的是 Google 字体 Open Sans。我下载了字体文件并与应用程序捆绑在一起(应用程序必须离线工作)。最近我注意到谷歌有一个更新版本的字体,此时我重新下载了它并在应用程序中更新了它。这时候我也改变了在我的 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,并通过 Jenkins 部署在 Tomcat Windows 服务器上。测试服务器当前正在开发模式下运行。

我已经尝试清除浏览器中的所有缓存并重新启动计算机几次,但没有任何解决方法。

不幸的是,我无法链接到该应用程序,因为它只是内部的。

下面是在测试服务器上和在 localhost 上查看时的差异截图:

应用比较

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

4

0 回答 0