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

简单的问题：为什么这两种字体在Photoshop和网站上看起来不同。字体在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。*”）时，网站没有任何变化。哪里不对？

来源

2012-09-21 whoah

您正在指定几种字体文件类型，您如何知道正在使用哪一种？也许他们不匹配。 –

目前只有SegoeWP.ttf – whoah

@whoah也许你在photoshop中看不到图片的实际尺寸..它们不能不同。当尺寸为30px时，IT应该在30px无处不在。尝试按下ctrl + 0在ps ..看到在实际大小.. –

的Photoshop处理字体有很多不同于Web浏览器......因为Photoshop的使用一样平滑，内核和其他字体几乎总是在浏览器中看起来不同的功能

来源

2012-09-21 16:15:47 atar

呃，好吧，所以不可能让这个字体变得不那么”大胆“？ – whoah

可以使用字体重量：轻; – atar

我添加它，这种改变什么 - 同样的情况 – whoah

-2

确保您添加CSS到正确的位置有时可能是问题。有关如何减少字体的重量全音符，你可以在这里找到：

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

来源

2012-09-21 16:43:25 Joe

要得到同样的结果尝试使用font-smoothing: antialiased，减少字体大小，因此你的Photoshop图像相匹配。

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

Smashing Magazine在字体渲染上有很好的article。

来源

2012-09-22 12:30:52 Henrik

更多类似'-webkit-字体平滑：抗锯齿; \t -moz-OSX的字体平滑：灰阶;' – user3284463

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

回答

相关问题