字体在 Photoshop 和网站上看起来不同答案

【问题标题】：Font looks different on photoshop and at website字体在 Photoshop 和网站上看起来不同
【发布时间】：2023-03-23 10:54:01
【问题描述】：

简单问题：为什么这 2 种字体在 Photoshop 和网站上看起来不同。

在这张图片中 - 第一个文本来自 html 代码，第二个是来自 photoshop 的图像。相同的字体，相同的大小 - 30。但第一个看起来比第二个更“粗体”。为什么？我想拥有与 Photoshop 相同的字体（第二张图片）。

这里的css代码：

@font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
         format("embedded-opentype"),
     url("fonts/play/SegoeWP.woff") format("woff"),
     url("fonts/play/SegoeWP.ttf") format("truetype"),
     url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}

#strona {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#Section1 
{
      font-family: "SegoeWP", Tahoma, Arial, sans-serif;
      font-size: 30px; 
}



header, footer, article, section, hgroup, nav, figure {
    display: block;
}


 body {
  font-family: "SegoeWP", Tahoma, Arial, sans-serif;
  background-image:url('background.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  color: #ffffff;

 }

还有html代码。

  <section id="Section1">  { mywebsite.NET } </section>
  <img src="mojeportfolio.png" />

有什么想法吗？问候！

我发现文件夹中有 3 种 SegoeWP 字体。 “SegoeWP”、“SegoeWP-Light”、“SegoeWP-Semibold”。 “SegoeWP”看起来有点“粗体”，但这个“SegoeWP-Light”非常完美，当我双击它时，它看起来与 Photoshop 中的相同。如何在我的网站上使用它？当我更改这部分 -> url("fonts/play/SegoeWP-Light.*") 时，网站上没有任何变化。怎么了？

【问题讨论】：

你指定了几种字体文件类型，你怎么知道使用的是哪一种？也许他们不匹配。
目前只有SegoeWP.ttf
@whoah 也许您在 Photoshop 中看不到实际尺寸的图片。它们不可能不同。当尺寸为 30 像素时，它应该是 30 像素。尝试按 ctrl+0在 ps.. 中查看实际大小..
@Miro Markarian -> 它是 30px。我在photoshop上测试过，这个字体是“Light”。 “Semibold”和“regular”在网站上看起来很相似。如何在网站上使用“Light”选项？ font-weight: lighter; 什么都不改变 :(
我发现文件夹中有 3 种 SegoeWP 字体。 “SegoeWP”、“SegoeWP-Light”、“SegoeWP-Semibold”。 “SegoeWP”看起来有点“粗体”，但这个“SegoeWP-Light”非常完美，当我双击它时，它看起来与 Photoshop 中的相同。如何在我的网站上使用它？当我更改这部分 -> url("fonts/play/SegoeWP-Light.*") 时，网站上没有任何变化。怎么了？

标签： html css fonts photoshop

【解决方案1】：

photoshop 处理字体的方式与网络浏览器大不相同……因为 Photoshop 使用了平滑、内核等功能，因此字体在浏览器中几乎总是看起来不同

【讨论】：

嗯，好的。所以不能让这个字体不那么“粗”吗？
你可以使用 font-weight:lighter;
我加了，这没什么变化——同样的情况
尝试将值从较轻更改为 300 或 400。
试试这个，看看它是否改变了任何东西..你的 css 可能被另一种样式覆盖.. mywebsite .net

【解决方案2】：

要获得相同的结果，请尝试使用 font-smoothing: antialiased，并减小字体大小以匹配您的 Photoshop 图像。

最大的不同是因为 Adobe Photoshop 不会像大多数浏览器那样进行亚像素字体平滑。在您的示例图像中，如果您放大，这很容易看到（请参阅边缘周围的颜色变化）。 Windows 有使用一种额外清晰的亚像素字体渲染形式的历史，这会加剧问题，因为感知的字体粗细可能会发生严重变化。

Smashing Magazine 在字体渲染方面有出色的article。

【讨论】：

更像-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

【解决方案3】：

确保您将 css 添加到正确的位置，有时这可能是问题所在。有关如何减轻字体重量的完整说明，您可以在此处找到它：

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

【讨论】：