17

这是网页的 Photoshop 设计中的图像：

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 中的文本设置：

在此处输入图像描述

4

12 回答 12

20

您在 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'>

（将上述代码复制为<head>HTML 文档中的第一个元素。）

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

加强 WebKit 中的枯燥文本- 由 Chris Coyier 撰写。

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

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

在此处输入图像描述

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

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

顺便说一句，对我来说看起来不错... :)

欲了解更多信息：

仔细观察字体渲染- Tim Ahrens

祝你好运！

于 2014-08-28T21:10:02.533 回答
14

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

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

于 2014-08-27T15:04:47.040 回答
5

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 中看起来很糟糕 - 这是一篇关于这个问题的有启发性的文章。

于 2014-09-01T15:10:34.883 回答
5

您应该@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 仅具有常规和粗体字重。

于 2014-08-29T06:06:59.223 回答
2

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

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

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

于 2014-09-01T14:37:42.937 回答
2

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

-webkit-text-stroke: 0.25px;
于 2013-08-06T13:03:21.630 回答
2

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

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

祝你好运 ：）

于 2014-08-28T14:30:00.817 回答
2

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

h1 {
    font-family: "PT Sans";
    font-weight: lighter;
}
于 2013-08-06T14:11:09.590 回答
1 
body {
  text-rendering: optimizeLegibility;
}
于 2014-09-02T10:34:12.797 回答
1

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

于 2013-08-06T13:05:12.613 回答
1

尝试以下操作：

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

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

希望有帮助！

于 2014-05-08T14:03:27.783 回答
-1

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

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

于 2017-09-27T18:11:45.567 回答