logo标签列表

为什么我的字体看起来如此粗体？

cssfontsfont-facewebfontstypography
18

这里是网页Photoshop设计的图片:

Photoshop渲染

同样大小和重量的网页如下：

网页渲染

可以看到，在网页渲染中，文本呈现出更加粗厚的效果，以至于它几乎看起来像一个完全不同的字体。

这是 @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中文文本的设置参考：

enter image description here

你使用的是哪个浏览器？ - VirtualTroll
1
@jfrej 非常棒的文章，谢谢 - 但我正试图实现相反的效果！ - Ben
1
我明白，并因此没有将其发布为答案。但实际上（几乎）是相同的情况 - 你不能让PS中的字体看起来像在网页上一样，出于同样的原因，你也不能让网页上的字体看起来像在PS中一样。 - jfrej
Cufon 可能会产生更接近 Photoshop 的结果。 - thirtydot
1
这是一个复杂的问题，为了澄清事情，您应该发布足够的HTML和CSS代码，以便可以重现该问题。单词“RIGHT HERE”似乎是假粗体，这是得到较差渲染的一种确定方式；其余部分更加晦涩。 - Jukka K. Korpela
显示剩余9条评论
12个回答
21
如果您在Photoshop中使用PT Sans字体，那么您已经在计算机上安装了该字体。您可以尝试删除@font-face代码，并从计算机上加载已安装的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文档的<head>中的第一个元素。

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

在WebKit中改善无聊的文本 - 作者Chris Coyier。

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

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

enter image description here

如上所示，文本在不同的浏览器中呈现出不同的效果，在Photoshop中反锯齿也不同。如果您得到的结果相同，并且看起来几乎完全是另一种字体，则我的观点是：

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

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

欲了解更多信息：

深入了解字体呈现 - 作者Tim Ahrens

祝你好运！

2
这是一个很好的答案，我会用它来支持自己在帮助非网页设计师成为网页设计师的任务中。第一课：Photoshop !== Web。 - Ryan Wheale
它是怎么样的？你在 OP 案例上做了什么工作？我一无所知。 - MEM
15

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

其次，你可以尝试向该字体添加以下之一：-webkit-font-smoothing:none;、-webkit-font-smoothing:antialiased;或-webkit-font-smoothing:subpixel-antialiased;。

6

您应该创建分别针对所使用的普通和粗体字重的@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; 为我解决了这个问题。 - Alex Kendrick
这对我有用。 - jarodtaylor
6

Chrome浏览器渲染许多字体时会变得很粗。不幸的是，我们不得不使用供应商前缀来解决字体在设计应用程序中无法像原本一样呈现的问题。这基本上是我们大部分网站的标准:/

我们使用一个占位符以防需要快速启用/禁用解决方法（SCSS）:

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

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

你的字体在Chrome中看起来很糟糕 - 这里是解决方法 是一篇关于这个问题的启发性文章。

2

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

-webkit-text-stroke: 0.25px;
很遗憾，我认为设置已经处于最小值了。0-1像素之间的任何差异都非常微小（如果有的话），而较大的整数会增加权重。 - Ben
2

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

h1 {
    font-family: "PT Sans";
    font-weight: lighter;
}
很遗憾，这并没有产生任何影响，但感谢您的回复。 - Ben
2

看起来你在项目中使用了'PT Sans'字体，在大多数情况下，大部分字体都会有不同的字重。

你可以从Google 字体中获取字体，而不是在你的网站中渲染它。然后，你可以使用每种字体权重来满足你的要求，如加粗、正常或轻盈，并尝试使用这个CSS text-rendering 属性来使Photoshop和Web看起来相同。

.your-class {text-rendering: optimizeLegibility;}

祝你好运 :)

2

由于PT Sans是一种TTF字体，并且其许可证允许修改，因此您可以通过使用http://www.freetype.org/ttfautohint/处理文件来调整其在小尺寸下的外观（在高像素密度屏幕上，这将对正确呈现字体形状没有明显影响，因为它们不需要提示）。

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

当然，这将替换字体文件可能包含的提示，因此如果字体创建者费心地使用巧妙的手动提示来调整某些字形组合，则自动提示可能会变得更差。

1
body {
  text-rendering: optimizeLegibility;
}
1
尝试以下操作：
.YourTextClass {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

如果您正在对文本等进行动画处理，则可以在后续类中覆盖此内容，但是您可能还会遇到使用此内容的Z索引问题，因此，请务必牢记如果注意到某些内容消失 - 您只需要z-index:1或2或其他递增的值即可。

希望这可以帮助您！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接