我最近反复遇到同样的问题 - Photoshop 中的字体看起来甚至与嵌入网站的字体不相近。
显然 - 它主要是关于外部的、第 3 方字体，因为对于 Helvetica、Arial 等，我得到了相当不错的结果。最麻烦的是细而高的字体，尽管如果使用小于 16 像素的大小的常规字体也会出现此问题（不知道为什么在 16 像素处经常出现神奇的边框，因为当东西开始看起来到处都很棒时）。
这里我们有一个 14px #000000 的 SkarpaLT 字体示例 - 在左侧，您可以看到它嵌入@font-face到网站中，因为它在 Windows 7 上的 Firefox 中呈现。在右侧，您可以看到完全相同的字体使用不同的抗锯齿设置在 Photoshop 中显示的颜色和大小：
如您所见-差异非常大。在火狐中：
- 整个字体要厚得多，在 Photoshop 中似乎是轻量版，而在 Firefox 中是普通版
- 抗锯齿非常奇怪，在某些字母（例如 O）上几乎不存在，在其他字母上很好
- 与其他字母相比，A奇怪地短
- O不是圆的
正如你所看到的 - 我试图弄乱 Photoshop 设置，但到目前为止，我从未设法提取出接近 Firefox 的结果。我也很少尝试在 Firefox 中更改文本以使其看起来更接近 Photoshop 呈现的内容，但我一无所获。
因此分为两部分：
- 设计师有什么方法可以预测字体在 Web 浏览器中何时表现不佳，即使它在 FireFox 中看起来不错？
- 如何以更接近 Web 浏览器的方式在 Photoshop 中渲染字体，或强制 Web 浏览器以更接近 Photoshop 的方式渲染字体？
或者长话短说：如何使用非常规的细字体设计一个在网络浏览器中看起来不错的网站？
[编辑：]解决方案亮点：似乎唯一好的解决方案是字体拖动器，它允许在 Web 浏览器中测试字体以实际查看它们是否不会产生任何奇怪的伪影。除此之外没有什么可以做的。
在设计方面，此操作可用于在 Photoshop 中创建亚像素抗锯齿。它将使字体更清晰，类似于您在浏览器中获得的字体。唯一的问题是它创建了 3 个文本图层，因此需要在完成所有文本编辑后应用它。