背景:在一个内部网络应用程序中,我使用的是 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 上查看时的差异截图:
我认为这可能是许多事情的结果,所以如果我需要提供更多信息,请告诉我。