Google Web字体（css）与photoshop中的字体不同

Question

到目前为止，我已经从Google Web字体下载了字体以使用psd项目，但是到目前为止，在我的html中，我的Google Web字体看起来与下面的图片有所不同；

我的psd

和我的HTML

字体大小

字体系列

行高

字体重量都与photoshop相同，但字体看起来有所不同...

我增加了身体

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

但是什么都没有改变。

顺便说一句，我的字体是Hind Fonts

Answer 1

无论哪种浏览器，字体渲染都略有不同，字体渲染也取决于您的操作系统。

可以影响字体外观的另一件事是设计人员如何在Photoshop中设置文本抗锯齿。 文本抗锯齿在顶部菜单栏（选择了文本工具）下进行控制：

以下是具有5种不同抗锯齿设置的Hind字体集：

请注意，特别是强抗锯齿设置如何改变实际字体字形的外观。 如果没有看到您的实际代码，就很难比较和诊断Photoshop以外可能引起的任何问题

Answer 2

您必须记住，每个浏览器呈现的字体都不同。 Photoshop具有比Web浏览器更多的字体功能。 每个浏览器和OS都有一个独特的渲染引擎，因此即使您在一个浏览器/ OS组合中获得相同的渲染引擎，在另一个浏览器/ OS组合中看起来也会有所不同。
您可以使用text-rendering稍微修复字体text-rendering 。 此属性向渲染引擎提供有关在渲染文本时要进行哪些优化的信息。
它没有在任何CSS标准中定义-只是SVG属性。 但是，Gecko / WebKit / Blink浏览器允许您将此属性应用于HTML元素。
一些字体文件包含有关应如何呈现字体和optimizeLegibility的其他信息
因此您可以使用：
```
 .yourText { text-rendering: optimizeLegibility; } 
```
您可以尝试使用诸如font-stretch: normal;类的选项font-stretch: normal; 或font-weight:normal; 也许他们会帮助您至少一点。

Answer 3

您确定您没有将浏览器的视图缩放比例设置为略低于100％吗？ 像这样缝。