网站和 Invsion（设计师和前端开发人员工具）之间的字体差异

Question

我正在努力使我们的网站字体看起来完全符合设计师的本意。

我们使用了 Google 的“Source Sans Pro”文件。 我尝试了几种策略：

• 直接从谷歌使用 [https://fonts.google.com/?query=source+sans+pro]
• 从 Google 下载 TTF 文件并使用 @font-face 使用它们
• 使用 Google 推荐的字体松鼠将这些 TTF 文件转换为 WOFF/WOFF2 文件https://www.gorges.us/blog/google-fonts
• 尝试在一个空的干净的 Angular CLI 6 项目上使用此字体

不幸的是，以上都没有使字体看起来相似。

有人遇到过这个问题吗？

Answer 1

差异是由实际在屏幕上绘制字体的软件引起的：渲染引擎​​。浏览器或设计程序可以有一个自定义的，或者基于open source one 的一个，或者将其委托给操作系统。这些渲染引擎决定将矢量形状转换为像素的方式之间的细微差别会导致细微的视觉差异。

你的字体永远不会在每个操作系统和浏览器上看起来都是完美的，这很好！

Answer 2

大多数字体在 PhotoShop 和浏览器中看起来确实不同。如果你想让它尽可能接近，要求设计者导出字体文件，然后添加到你的目录中，并通过@font-face添加。