字体在photoshop和网站上看起来不同

Question

简单的问题:为什么这两种字体在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"非常完美,看起来和我在双击时的照片相同.我怎样才能在我的网站上使用它？当我更改此部分 - > url("fonts/play/SegoeWP-Light.*")时,网站上没有任何变化.怎么了？

Answer 1

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

Answer 2

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

最大的差异是因为Adobe Photoshop不会像大多数浏览器一样进行亚像素字体平滑。在示例图像中，如果放大就可以很容易地看到它（请参见边缘的颜色偏移）。Windows具有使用超清晰形式的亚像素字体渲染的历史，由于感知的字体粗细可能会发生严重变化，这加剧了该问题。

Smashing Magazine上有一篇出色的字体渲染文章。