HTML中的字体大小比Photoshop中的大

Question

当我在Chrome上查看时，我的<nav>元素显示的字体大小要比我在Photoshop中最初设计时大得多。在Chrome中，我的字体宽度显示23px大于Photoshop。我的解决方案是72dpi，其他一切似乎都显示得很好。

这是我的jsFiddle。它应该看起来像this。

Answer 1

您看到的行为是因为您在链接元素上使用text-transform: uppercase;。这会将其中的每个字符转换为字符的大写版本。 22px字符的大写版本大于font-size的{​​{1}}集。

您可以改为使用22px并删除 HTML 中的大写字符：

font-variant: small-caps;

并在 CSS ：

中设置此项

<ul>
  <li><a href="#">home</a></li>
  ..

这应该可以解决问题。

Answer 2

如果差异只是宽度，那么如果声明字母间距可能会出现问题，因为Photoshop中的字母间距不能直接转换为CSS。如果这是一个嫌疑人，您可以通过将Photoshop中显示的值除以1000并在CSS中将结果指定为em测量来正确确定字母间距。

示例：Photoshop字母间距等于20除以1000等于CSS字母间距0.02em