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

以下是网页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中文本的设置，以供参考：

---

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

-webkit-text-stroke: 0.25px;

---

如何在PS中设置抗锯齿？这可能就是为什么它在PS中看起来不同，然后在浏览器中。 问题是，每个浏览器呈现文本的方式都不一样，很遗憾。而且不能设置抗锯齿。 这可能会让您感兴趣：

---

我想您使用的是标题标签上的字体。如果是，请尝试将字体重量设置为较轻：

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

请尝试以下操作：

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

如果你正在为文本等设置动画，那么你可以在以后的课程中覆盖它，很明显-但是你也可能会遇到使用它的Z索引问题，所以如果你注意到东西正在消失，一定要记住这一点-然后你需要做的就是Z索引：1或2，或者不管它是什么，按顺序来说

---

希望有帮助

首先，您是否尝试过使用

font-weight

属性进行操作？它可以不仅仅具有

正常值

和

粗体值

。您可以尝试将其设置为100、200、…、900，然后查看字体大小是否在变化（我认为这将取决于您使用的字体）

---

其次，您可以尝试将以下内容之一添加到此字体：

-webkit字体平滑：无，
-webkit字体平滑：抗锯齿
或
-webkit字体平滑：亚像素抗锯齿
如果您在项目中呈现“PT SAN”，通常大多数字体都具有不同的字体权重。
您可以从中获取字体，而不是在站点中呈现字体。然后，您可以使用每个字体的重量来匹配您的要求，例如粗体、规则或浅色，并在Photoshop和web中获得相同的外观和感觉。请尝试此css文本呈现属性

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

祝你好运：）
如果你在Photoshop中使用PT Sans字体，那么你已经在你的电脑上安装了该字体。你可以尝试删除@font-face代码，并从你的电脑中加载已安装的PT Sans字体，该字体与你在Photoshop中使用的字体文件相同，以检查问题是否是因为使用@font-face代码或@font-face而发生的格式化文件。（例如，没有@font-face，没有额外的css）


身体{
字体系列：“PT SAN”；
字体大小：正常；
字体风格：普通；
字号：28px；
颜色：#4545；
文本对齐：居中；
}
这里有一些好看的文字


您也可以从中尝试PT SAN



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

至于
-webkit字体平滑
，我不认为这有什么大区别，但你可以读一篇关于它的好文章

-克里斯·科伊尔

我已经从下载并安装了PT SAN，并使用上述HTML代码亲自测试了该问题，结果如下：

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


正如您可以看到的，上面的文本在不同浏览器中呈现不同，在Photoshop中消除混叠，如果这与您的结果相同，并且在您看来几乎像是完全不同的字体，那么我的观点是：

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

顺便说一句，我觉得很好……：）

有关详细信息：

-蒂姆·阿伦斯

祝你好运
对于所使用的常规字体和粗体字体权重，您应该有单独的
@font-face
声明（顶部的示例仅列出一个），例如

此外，下面的CSS应该可以改善渲染效果-

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

注意：标准PT SAN仅以常规和粗体显示。
由于PT SAN是TTF字体，并且许可证允许修改，因此您可以通过使用
（小尺寸意味着在高像素密度的屏幕上几乎看不到效果，因为这些屏幕不需要提示来呈现正确的字体形状）

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

当然，这将取代字体文件可能包含的提示，因此，如果字体创建者费心用巧妙的手动提示调整某些字形组合，那么自动提示可能会更糟
 Chrome使许多字体变得非常肥。不幸的是，我们求助于供应商前缀来解决字体呈现方式与设计应用程序中呈现方式不同的问题。这是我们大多数网站的基本标准：/

如果需要快速启用/禁用变通方法（SCS），我们将使用占位符：

这是一篇关于这个问题的启发性文章。
问题：我的网站因为所有字体都是粗体而表现怪异

body {
  text-rendering: optimizeLegibility;
}

解决方案：我在css文件和头文件中使用了以下代码行
我删除了以下代码行：
@导入url（“”）；
http://fonts.googleapis.com/css?family=PT+Sans'rel='stylesheet'type='text/css'>
W
@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;
}

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

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

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

body {
  text-rendering: optimizeLegibility;
}