为啥我的字体文本看起来如此粗体？

Posted

技术标签:

【中文标题】为啥我的字体文本看起来如此粗体？【英文标题】：Why does my font-face text look so bold?为什么我的字体文本看起来如此粗体？ 【发布时间】：2013-08-07 11:57:41 【问题描述】：

这是网页 Photoshop 设计的图片：

与大小、重量等相同的网页：

如您所见，文本在 Web 渲染中渲染得更厚，以至于它看起来几乎完全是一种不同的字体。

这是文本附带的 @font-face 代码：

@font-face 
        font-family: "PT Sans";
        src: url('fonts/151428223-PTS55F.eot');
        src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
        url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
        url('fonts/151428223-PTS55F.woff') format('woff'),
        url('fonts/151428223-PTS55F.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;

...作为参考，Photoshop 中的文本设置：

【问题讨论】：

你用的是什么浏览器？ Google Chrome，但它在 Safari 中的呈现方式相同。 @jfrej 这是一篇很棒的文章，谢谢 - 但我正试图达到相反的效果！ 我了解，因此未将其作为答案发布。但实际上情况（几乎）是相同的——你不能让 PS 中的字体看起来像在网络上，出于同样的原因，你不能让网络上的字体看起来像在 PS 中。 这是一个复杂的问题，为了澄清问题，您应该发布足够的 html 和 CSS 代码，以便重现该问题。 “RIGHT HERE” 字样似乎是假的粗体字，这肯定会导致渲染效果不佳；其余的就比较模糊了。 【参考方案1】：

您在 Photoshop 中使用 PT Sans 字体，然后您已经在 PC 上安装了该字体。您可以尝试删除 @font-face 代码并从您的 PC 加载已安装的 PT Sans 字体，该字体与您在 Photoshop 中使用的字体文件相同，以检查问题是否由于使用 @font-face 代码或@font-face 格式文件。 （例如，没有 @font-face 也没有额外的 css）

<head>
<style>
    body 
        font-family: "PT Sans";
        font-weight: normal;
        font-style: normal;
        font-size: 28px;
        color: #454545;
        text-align: center;
    
</style>
</head>
<body>
    <p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>

您也可以通过Google Fonts 尝试 PT Sans。

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

（将上述代码复制为 HTML 文档 &lt;head&gt; 中的第一个元素。）

至于-webkit-font-smoothing，我不认为它有什么大的不同，但你可以阅读一篇关于它的好文章。

Beefing Up Dull Text in WebKit - 由 Chris Coyier 撰写。

我有Photoshop CC (2014) 并且我已经从Google Fonts 下载并安装了 PT Sans，我已经使用上面的 HTML 代码自己测试了这个问题，结果如下：

1 - 您的图像和 2 - 我的 Photoshop CC 2014（抗锯齿平滑）

如您所见，上面的文本在浏览器和 Photoshop 中的抗锯齿呈现不同，如果您得到的结果相同，并且在您看来几乎完全是不同的字体，那么我的观点是：

Windows、Linux、OS X 和移动设备每个（可能）都有不同的 文本渲染引擎。更不用说每个不同的浏览器 有自己的文本渲染默认值，所以不能保证 您的字体渲染将按预期显示在用户的 系统。 - CSS-Tricks text-rendering

顺便说一句，我觉得它看起来不错... :)

更多信息：

A Closer Look At Font Rendering - 蒂姆·阿伦斯

祝你好运！

【讨论】：

这是一个很好的答案，我将用它来支持自己完成帮助非网页设计师成为网页设计师的任务。第 1 课：Photoshop ！== 网页。 怎么样？对 OP 案有什么作用？我一无所知。【参考方案2】：

首先，您是否尝试过使用font-weight 属性进行操作？它不仅可以有normal 和bold 值。您可以尝试将其设置为 100、200、...、900 并查看字体粗细是否发生变化（我认为这将取决于您使用的字体）。

其次，您可以尝试在此字体中添加以下内容之一：-webkit-font-smoothing: none;、-webkit-font-smoothing: antialiased; 或 -webkit-font-smoothing: subpixel-antialiased;。

【讨论】：

【参考方案3】：

对于您使用的常规和粗体字体粗细，您应该有单独的 @font-face 声明（顶部的示例仅列出了一个）例如。

@font-face 
    font-family: "PT Sans";
    src: url('fonts/PTSans-Regular.eot');
    src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Regular.woff') format('woff'),
         url('fonts/PTSans-Regular.ttf') format('truetype'),
         url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;


@font-face 
    font-family: "PT Sans";
    src: url('fonts/PTSans-Bold.eot');
    src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Bold.woff') format('woff'),
         url('fonts/PTSans-Bold.ttf') format('truetype'),
         url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;

此外，下面的 CSS 应该会改进渲染 -

.selector 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

注意：标准的 PT Sans 只有常规粗体。

【讨论】：

-webkit-font-smoothing: antialiased; 和 -moz-osx-font-smoothing: grayscale; 帮我解决了这个问题。 这是为我做的。【参考方案4】：

Chrome 使许多字体变得很胖。不幸的是，我们求助于供应商前缀来解决字体与设计应用程序中的呈现方式不同的问题。这基本上是我们大多数网站的标准：/

我们使用占位符以防我们需要快速启用/禁用解决方法 (SCSS)：

%fix-fatty-fonts 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;


html, body, button, input, select, textarea  @extend %fix-fatty-fonts;

Your fonts look awful in Chrome - here’s the fix 是一篇关于这个问题的启发性文章。

【讨论】：

【参考方案5】：

好的，如果这个问题发生在基于 -webkit 的浏览器中。然后你可以添加这个属性来重置厚度。

-webkit-text-stroke: 0.25px;

【讨论】：

不幸的是，我认为该设置已经处于最低限度。 0-1px 之间的任何值都几乎没有区别（如果有的话），而更大的整数会增加权重。【参考方案6】：

我想您正在使用标题标签上的字体。如果是这样，请尝试将 font-weight 设置为较轻：

h1 
    font-family: "PT Sans";
    font-weight: lighter;

【讨论】：

很遗憾，这并没有什么不同，但感谢您的回复。【参考方案7】：

您似乎在项目中渲染“PT Sans”，通常大多数字体都有不同的字体粗细。 您可以从google fonts 获取字体，而不是在您的站点中呈现它。然后您可以使用每种字体粗细来匹配您的要求，例如粗体、常规或浅色，并在 Photoshop 和 Web 中获得相同的外观和感觉，试试这个 css 文本渲染属性。

.your-class text-rendering: optimizeLegibility;

祝你好运:)

【讨论】：

【参考方案8】：

由于 PT Sans 是 TTF 字体，并且许可证允许修改，您可以通过处理文件来调整它在小尺寸上的显示方式 http://www.freetype.org/ttfautohint/ （小尺寸意味着它在高像素密度屏幕上几乎没有可见的效果，因为这些屏幕不需要提示来呈现正确的字体形状）。

不同的软件平台对无提示字体的处理方式不同，几乎没有字体是完全提示的。通过向字体文件添加提示，您可以在屏幕缺少像素时强制进行特定渲染，ttfautohint 中有很多选项可以调整您喜欢的渲染类型（您可以在 Linux 上获得相同的结果而无需修改字体，因为渲染引擎可通过 fontconfig 进行调整）。

当然，这将取代字体文件可能包含的提示，因此如果字体创建者费心用巧妙的手动提示调整某些字形组合，那么自动提示可能最终会变得更糟。

【讨论】：

【参考方案9】：

你是如何在 PS 中设置抗锯齿的？这可能就是为什么它在 PS 和浏览器中看起来不同的原因。 问题是每个浏览器都以不同的方式呈现文本，可悲的是。而且你不能设置抗锯齿。 这对您来说可能很有趣： http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

【讨论】：

抗锯齿在 Photoshop 中设置为“平滑”。谢谢你的链接。那么有没有办法在浏览器中假装这种风格呢？ 将您的文本转换为图像，然后您将获得与 Photoshop 中完全相同的文本。但是在 CSS（或 JS/HTML）中没有办法让文本在所有浏览器中显示完全相同。【参考方案10】：

尝试以下方法：

.YourTextClass 
-webkit-transform:translateZ(0);
transform:translateZ(0);

如果您正在为文本等设置动画，那么您可以在以后的课程中覆盖它，很明显 - 但您也可能会遇到 Z 索引问题，因此如果您发现某些东西消失了，请务必记住这一点 - 所有您需要的然后要做的是 z-index:1 或 2 或任何可能的值，按顺序说。

希望有帮助！

【讨论】：

【参考方案11】： 
body 
  text-rendering: optimizeLegibility;

【讨论】：

【参考方案12】：

问题：我的网站表现得很奇怪，所有字体都是粗体。

解决方案：我在css文件和头文件中使用了以下代码行 我删除了以下代码行： @import url('https://fonts.googleapis.com/css?family=PT+Sans'); http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

【讨论】：

我不认为这是对这个特定问题的答案。

以上是关于为啥我的字体文本看起来如此粗体？的主要内容，如果未能解决你的问题，请参考以下文章

当引号中的文本然后文本应该是粗体否则在水晶报表中的常规字体

为啥我的所有 UIAlertView 标签/文本在 iOS 8 中默认为粗体

textview可以设置字体的粗体 斜体吗

LaTeX - 制作更轻的文本版本，如反粗体？

R语言ggplot2可视化：使用element_text函数设置轴标题文本为粗体字体（Bold Font，只设置Y轴的标题文本使用粗体字体）

为啥我的字体在 IE9 中看起来好多了？