html - 字体在 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”非常完美，当我双击它时，它看起来和在 photoshop 中一样。我如何在我的网站上使用它？当我更改此部分 -> url("fonts/play/SegoeWP-Light.*") 时，网站没有任何变化。怎么了？

Answer 1

photoshop 处理字体的方式与 web 浏览器有很大不同...因为 photoshop 使用平滑、内核和其他功能，字体在浏览器中几乎总是看起来不同