Css 相同的浏览器。相同的windows版本。同样的风格。不同字体呈现

我们的一个客户说他网站上的字体变了。他提供了Wayback和当前网站之间的截图作为证据。

这些差别是细微的，但似乎在身高和体重上存在差异

我们花了数小时使用BrowserStack/Windows10/Chrome56比较了两个版本的风格。即使使用Chrome的综合样式视图（Computed->Show All），我们也可以找到零差异

一切都一模一样。以下是我们的测试URL：

要查看差异，请向下滚动直到激活粘性标题

---

我们错过了什么明显的东西吗？我们需要辞去工作去做销售吗

缓存的字体是.ttf，而实时版本是.woff2，也许这就是区别？我只是假设他们的机器人不支持.woff2，所以谷歌为他们提供了.ttf，现在你可以看到存档的.ttf版本的字体，尽管live版本为你提供了.woff2版本

缓存的字体为：

/*
     FILE ARCHIVED ON 3:34:20 Feb 1, 2017 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 22:23:03 Feb 14, 2017.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(/web/20170201033420/http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat-Bold'), url(/web/20170201033420/http://fonts.gstatic.com/s/montserrat/v9/IQHow_FEYlDC4Gzy_m8fcvEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype');
}

同时，直播网站的字体为：

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcjh33M2A-6X0bdu871ruAGs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fchHJTnCUrjaAm2S9z52xC3Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

UPD：不同之处在于版本，从链接的.ttf中可以看到，链接包含“v9”，而.woff2是“v10”。如果将“v10.ttf”与“v10.woff2”进行比较，它们将呈现相同的效果

如果您喜欢以前版本的字体，可以通过css设置@font-face，并将链接硬编码到v9字体：

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYFQlYEbsez9cZjKsNMjLOwM.eot');
  src: url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYFQlYEbsez9cZjKsNMjLOwM.eot?#iefix') format('embedded-opentype'),
       local('Montserrat Regular'),
       local('Montserrat-regular'),
       url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2') format('woff2'),
       url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff'),
       url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf') format('truetype'),
   url('http://fonts.gstatic.com/l/font?kit=zhcz-_WihjSQC0oHJ9TCYKWUboTb-jS2tyCOQMtm97g&skey=7bc19f711c0de8f&v=v9#Montserrat') format('svg');
}

---

哇！你能告诉我你是怎么做的吗？是的，做得很好。使用dev工具，我得到的结果是空的。回答得很好。@clifgriffin谢谢你们！好吧，这不是一个很大的谜团，因为所有的属性都是相同的，不同的不仅仅是菜单，就像你说的，而是文本，我注意到问题一定是字体本身，所以我只是检查了链接的字体，得出了所有这些结论。请不要从事销售工作！最好考虑邀请我作为一名学徒进入你们的团队。我期待着学习和实践的工艺！