Question

以下是网页Photoshop设计中的图片：

Photoshop render

具有相同尺寸，重量等的网页：

Webpage render

正如您所看到的，文本在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中文本的设置：

enter image description here

Answer 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文档的<head>中的第一个元素。）

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

Beefing Up Dull Text in WebKit - 来自Chris Coyier。

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

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

enter image description here

正如您所看到的，上面的文字在浏览器中呈现的方式与Photoshop中的消除锯齿效果不同如果您拥有相同的结果并且它看起来几乎完全与您不同，那么My Point就是：

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

顺便说一下，我看起来很好...... :)

了解更多信息：

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

好运！

Answer 2

首先，您是否尝试使用font-weight属性进行操作？它可以包含normal和bold个值以上的值。您可以尝试将其设置为100,200，...，900并查看字体重量是否正在变化（我认为这取决于您使用的字体）。

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

Answer 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只有常规和粗体。

Answer 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是关于这个问题的启发性文章。

Answer 5

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

-webkit-text-stroke: 0.25px;

Answer 6

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

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

Answer 7

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

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

祝你好运：）

Answer 8

由于PT Sans是TTF字体，并且许可证允许修改，因此您可以通过处理文件来调整其查看小尺寸的方式 http://www.freetype.org/ttfautohint/ （小尺寸意味着它对高像素密度屏幕几乎没有明显影响，因为那些不需要提示来渲染正确的字体形状）。

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

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

Answer 9

你如何在PS中设置抗锯齿？这可能就是为什么它在PS中看起来不同，然后在浏览器中。问题是每个浏览器都以不同的方式呈现文本，令人遗憾。而且您无法设置消除锯齿功能。这可能对您有意义： http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

Answer 10

尝试以下方法：

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

如果您正在为文本等设置动画，那么您可以在后面的课程中覆盖它，显然 - 但是您也可能会遇到Z索引问题，所以如果您发现事情消失，请务必记住这一点 - 所有您需要的那么就是z-index：1或2或者它可能是什么，顺序说。

希望有所帮助！

Answer 11

body {
  text-rendering: optimizeLegibility;
}

Answer 12

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

解决方案：我在css文件和头文件中使用了以下代码行我删除了以下代码行： @import url（＆＃39; https://fonts.googleapis.com/css?family=PT+Sans＆＃39;）; http://fonts.googleapis.com/css?family=PT+Sans'的rel =＆＃39;样式表＆＃39;类型=＆＃39;文本/ CSS＆＃39;＆GT;

为什么我的字体文字看起来如此大胆？

12 个答案: