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

Question

我正在努力使我们的网站字体看起来完全像设计师所希望的那样。

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

• 直接使用Google [https://fonts.google.com/?query=source+sans+pro]
从Google
• 下载 TTF 文件，并通过@ font-face使用它们
• 按照Google建议https://www.gorges.us/blog/google-fonts
使用字体松鼠将这些TTF文件转换为 WOFF / WOFF2 文件
• 尝试在空的干净有角的CLI 6项目中使用此字体

不幸的是，上述所有方法都没有使字体看起来相似。

有人遇到这个问题吗？

Answer 1

大多数字体在PhotoShop和浏览器中的外观确实有所不同。如果要使其尽可能接近，请让设计者导出字体文件，然后将其添加到目录中并通过@ font-face添加。

Answer 2

差异是由实际上在屏幕上绘制字体的软件引起的：渲染引擎​​。浏览器或设计程序可以具有自定义程序，也可以具有基于https://github.com/gcharita/XMLMapper的程序，也可以将其委托给OS。这些渲染引擎决定将矢量形状转换为像素之间的细微差异将导致较小的视觉差异。

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