0

当我在 Chrome 上查看时，我<nav>的元素以比我最初在 Photoshop 中设计的字体大得多的字体显示每个列表元素。在 Chrome 中，我的字体显示23px的宽度比在 Photoshop 中大。我的分辨率为72dpi，其他一切似乎都显示得很好。

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

4

2 回答 2

3

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

您可以改为使用和删除HTMLfont-variant: small-caps;中的大写字符：

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

并将其设置在您的CSS中：

a { font-variant: small-caps; ..

这应该够了吧。

于 2013-05-11T03:20:22.823 回答
0

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

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

于 2014-01-10T17:21:43.917 回答