字体变得非常纤细答案

【问题标题】：Font turns up very slim字体变得非常纤细
【发布时间】：2011-11-13 21:25:53
【问题描述】：

在 Photoshop 中，我的字体正常，但是当我用 HTML 编码并在我的浏览器 (Chrome) 中对其进行测试时，它变得非常纤细。这是我的意思的图片：

我必须在 CSS 中编写什么代码才能使它与 Photoshop 中的一样？ 请注意，Photoshop 中的字体没有任何样式。

【问题讨论】：

你是在使用@font-face，还是只是设置字体系列？

标签： html fonts

【解决方案1】：

目前，您无法做很多事情来使其看起来与 Photoshop 中的一样。

目前，没有多少浏览器支持必要的 CSS 属性，这些属性告诉浏览器您希望如何呈现页面上的类型元素。

例如，一些 WebKit 浏览器支持类似于proposed font-smooth CSS property 的东西——参见Max Voltar's post on font-smoothing。

但是，始终值得记住的是，您的访问者并未使用 Photoshop 来查看您的网站，因此您永远不要期望 Photoshop 结果的精确逐像素副本出现在浏览器。

每个浏览器和操作系统（以及它们的组合）都会以不同的方式呈现类型。关闭了 ClearType 的 Windows，打开了 ClearType 的 Windows，带有 DirectDraw 的 IE9，Firefox，Chrome，Safari——你说的，它们都以不同的方式对待类型。如果您在多个平台上的多个浏览器中检查您的设计，您会看到这一点。

我的建议：不要出汗。

此外，您的设计似乎使用了 Myriad - 大概您正在使用 @font-face 规则向系统上未安装 Myriad 的最终用户展示这一点。因为如果你不是，请准备好让它看起来更加不同。

【讨论】：

【解决方案2】：

这就是我认为您正在寻找的内容：Photoshop Mock Up Font isn't same as in HTML

您可以使用字体粗细。

【讨论】：

【解决方案3】：

您的 Photoshop 计算机上的操作系统版本是多少？您使用的 Chrome 版本是什么？是在同一台电脑上吗？你做过跨浏览器测试吗？

浏览器有时会自己渲染字体。众所周知，Safari 会在 Windows 上使用 Apple 风格的别名来渲染它的字体（不是在最新版本中）。跨操作系统和跨浏览器的字体别名可能不同。

字体必须在两个操作系统上都存在。

像素大小也很重要。

Font smoothing explained

Browser font rendering and antialiasing – Windows vs. Mac

卡尔

【讨论】：

【解决方案4】：

使用图像而不是文字，那么每个人都会以同样的方式看到它。

【讨论】：

不要使用图片，这很糟糕有几个原因：1）以后很难编辑 2）鼠标选择很糟糕 3）它不适合搜索引擎
如果我这样做，那么所有者每次要编辑包时都必须更改图像
有很多易于使用的方法来使用自定义字体呈现文本，而无需使用图像。