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

【问题标题】：Font size is bigger in HTML than in PhotoshopHTML 中的字体大小比 Photoshop 中的大
【发布时间】：2013-05-10 21:30:58
【问题描述】：

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

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

【问题讨论】：

在其他浏览器中是什么样子的？您检查过 Chrome 设置吗？如果您单击页面底部的高级，则应该有一个Web content 部分，可让您设置Font size。
所有浏览器看起来都一样。
23px 是仅在宽度上更大，还是在高度上也更大？您能否创建一个 jsFiddle 来显示问题（使用相同的字体）并将其添加到您的帖子中？您能否添加 PSD 的一部分的屏幕剪辑（100% 缩放级别偏离课程），以显示您希望的外观？
这是我的小提琴jsfiddle.net/mitchellpash/mkPX8。它应该看起来像这样：imgur.com/r9AIXvu

【解决方案1】：

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

您可以改用 font-variant: small-caps; 并去掉 HTML 中的大写字符：

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

并在你的 CSS 中设置：

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

这应该可以解决问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：