logo标签列表

在Photoshop和网站上，字体看起来不一样。

htmlcssfontsphotoshop
9
简单的问题：为什么这两个字体在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;

 }

And html code.

  <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.*")时，在网站上没有任何变化。 这是怎么了？

你正在指定几种字体文件类型，你怎么知道哪一个正在被使用？也许它们不匹配。 - Diodeus - James MacFarlane
目前只有SegoeWP.ttf字体文件。 - whoah
@whoah 也许你在Photoshop中没有看到实际大小的图片。它们不应该有所不同。当尺寸为30px时，它应该在任何地方都是30px。尝试在ps中按下ctrl+0以查看实际大小。 - Miro Markaravanes
@Miro Markarian -> 这是30像素。我在Photoshop上测试了一下，这个字体是“Light”。在网站上，“Semibold”和“regular”看起来很相似。我该如何在网站上使用“Light”选项？font-weight: lighter;没有任何变化:( - whoah
我发现文件夹中有3种SegoeWP字体类型：“SegoeWP”，“SegoeWP-Light”和“SegoeWP-Semibold”。 “SegoeWP”看起来有点太“粗”，但是这个“SegoeWP-Light”完美无瑕，双击它时与Photoshop中的字体完全相同。我如何在我的网站上使用它？当我更改此部分-> url("fonts/play/SegoeWP-Light.*") 时，在网站上没有任何变化。出了什么问题？ - whoah
大多数浏览器不支持font-weight:lighter。 - Diodeus - James MacFarlane
3个回答
5

Photoshop和网络浏览器在处理字体方面有很大的不同...因为Photoshop使用了平滑、卷积核等函数，所以字体在浏览器中看起来几乎总是会有所不同。

嗯，好的。所以无法使这种字体变得不那么“粗体”吗？ - whoah
你可以使用 font-weight: lighter; 来设置字体的轻细程度。 - atar
我添加了它，但这并没有改变任何事情 - 情况仍然是一样的。 - whoah
尝试将值从 lighter 更改为 300 或 400。 - atar
试一下，看看是否有任何变化..你的CSS可能被另一个样式覆盖了..<span style='font-family: "SegoeWP";font-weight: 100;'>mywebsite.net</span> - atar
5
要获得相同的效果，请尝试使用font-smoothing: antialiased，并减小字体大小以使其与您的Photoshop图像匹配。
最大的区别是Adobe Photoshop不会进行亚像素字体平滑处理 - 与大多数浏览器不同。在您的示例图像中，如果您放大图像，这很容易看到（请参见边缘周围的颜色变化）。 Windows一直使用一种额外清晰的亚像素字体渲染形式，这加剧了问题，因为感知的字体重量可能会严重改变。
Smashing Magazine有一篇关于字体渲染的优秀文章article。
更像是 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - Rusty
-2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接