[英]Font looks different on photoshop and at website
Simple question: Why this 2 fonts looks different at photoshop and at website. 简单的问题:为什么这两种字体在photoshop和网站上看起来不同。
At this picture - this first text is from html code, second is an image from photoshop. 在这张图片 - 第一个文本来自HTML代码,第二个是来自photoshop的图像。 The same font, the same size - 30. But this first looks more "bold" than second.
相同的字体,相同的大小 - 30.但这首先看起来比第二个更“大胆”。 Why?
为什么? I want to have a identically font as it is at photoshop (second picture).
我希望在photoshop中使用相同的字体(第二张图片)。
Here css code: 这里是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. 和HTML代码。
<section id="Section1"> { mywebsite.NET } </section>
<img src="mojeportfolio.png" />
any ideas? 有任何想法吗? Greetings!
问候!
MORE 更多
i found, that I have 3 types of SegoeWP font in folder. 我发现,我在文件夹中有3种类型的SegoeWP字体。 "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold".
“SegoeWP”,“SegoeWP-Light”,“SegoeWP-Semibold”。 "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it.
“SegoeWP”看起来有些“大胆”,但这款“SegoeWP-Light”非常完美,看起来和我在双击时的照片相同。 How can I use it on my website?
我怎样才能在我的网站上使用它? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website.
当我更改此部分 - > url(“fonts / play / SegoeWP-Light。*”)时,网站上没有任何变化。 What is wrong?
怎么了?
To get the same result try using font-smoothing: antialiased
, and reducing the font size so it matches your Photoshop image. 要获得相同的结果,请尝试使用
font-smoothing: antialiased
,并减小字体大小,使其与Photoshop图像匹配。
The biggest difference is because Adobe Photoshop will not do subpixel font-smoothing—unlike most browsers. 最大的区别是因为Adobe Photoshop不会像大多数浏览器那样进行亚像素字体平滑。 In your example image this is easily visible if you zoom in(see the color shifts around the edges).
在示例图像中,如果放大(参见边缘颜色偏移),这很容易看到。 Windows has a history of using an extra crisp form of subpixel font rendering, which exacerbates the problem as the perceived font weight can change severely.
Windows有使用额外清晰形式的亚像素字体渲染的历史,这会加剧问题,因为感知的字体重量可能会严重变化。
Smashing Magazine has an excellent article on font rendering. Smashing Magazine有一篇关于字体渲染的优秀文章 。
photoshop处理字体的方式与网页浏览器有很大不同...因为photoshop使用了平滑,内核等功能,在浏览器中字体几乎总是不同
Make sure you are adding the css to the right location sometimes that could be the issue. 确保将css添加到正确的位置有时可能是问题。 For full notes on how to lessen the weight of a font you can find it here:
有关如何减轻字体重量的完整说明,请在此处找到:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.