HTML中Montserrat字体显示效果与Google Fonts不符的解决方法

可以按照下面的步骤逐一排查，最终实现和Google Docs中一致的字体显示效果：

• 把Montserrat字体正式引入项目
  只在CSS里写font-family: "Montserrat", sans-serif，浏览器是不会自动找到这个字体的。如果访问页面的用户本地没装Montserrat，浏览器会直接拿系统默认的无衬线字体凑数渲染。你得通过标准的字体加载流程，把需要的字体子集、对应字重的字体文件完整引入项目，不然加载缺斤短两，效果肯定不对。
• 把所有字体参数和设计稿对齐
  Montserrat不同字重下的January差别特别大：笔画粗细、字的宽度、转角的弧度，每个字重都有明确的设计区别。很多人出问题都是只写了字体名，没显式写和设计稿一致的font-weight值，浏览器就默认拿400的常规字重渲染，自然和Google Docs里的效果对不上。你得对着Google Docs里的设置，把字重、字号、字间距全部和代码里的配置做匹配，别靠浏览器默认值凑。
• 排查有没有其他样式把字体配置覆盖了
  打开浏览器开发者工具，选中这个.event-date元素，在Computed面板里看实际生效的字体规则：
  • 如果生效的字体根本不是Montserrat，说明你写的字体规则被优先级更高的全局样式盖了——比如全局给body设的字体、CSS重置文件的字体规则，你得把这个选择器的优先级提上去，保证你写的Montserrat配置真的能生效。
  • 如果Montserrat加载失败了，Computed面板会直接显示回退后的兜底字体名，这时候你得回去查字体引入的问题：比如引入路径写错了、跨域配置没弄对、字体文件被浏览器广告拦截插件挡了。
• 核对字体版本
  Google Docs里用的Montserrat是固定的官方版本，如果你项目里引的是好几年前的旧版本，或者第三方改过的非官方Montserrat，就算字体名一样，字形也会有细微差别。这种情况直接把字体文件换成和官方完全一致的版本就行。

内容的提问来源于stack exchange，提问作者seyet