HTML字体看起来参差不齐... photoshop vs html / css版本

时间:2011-06-30 13:12:47

标签: css fonts size

我用于创建网站布局的字体是否像素化是否正常?我使用格鲁吉亚,而在Photoshop中,我的线条流畅,一切看起来都很棒。但当我试图将其切片并编码css时,Georgia字体相同的大小看起来更加丑陋!

你有什么想法?

P.S。我使用em来声明css中的大小。

4 个答案:

答案 0 :(得分:2)

那是因为photoshop在文本上使用了反别名技术。

操作系统和浏览器都会影响网页中文本的外观。例如,Mac OS在所有系统UI上都有反别名文本。对于Windows,我相信他们有一个名为'ClearType'的选项,一旦打开,所有系统UI都会有流畅的文本。

答案 1 :(得分:1)

网络上的所有字体看起来都会略有像素化,除非你在Mac上使用比PC更好的类型。

我发现复制字体在网络上的外观的最佳方法是将Photoshop中的Anitialiasing设置为“sharp”。

可以想象将来会有CSS标记允许在浏览器中进行抗锯齿而不是基于操作系统。

这是一个常见问题。

请参阅此文章 http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts

另一种方法是使用像Cufon这样的东西为你的文字生成图像。最佳做法是仅将其用于标题。 http://cufon.shoqolate.com/generate/

答案 2 :(得分:0)

我也发现了这一点 - 每个浏览器都会以不同的方式呈现字体。我经常发现IE中的字体看起来好多了。有时我选择使用PS中创建的图像来获得平滑的外观,但在大多数情况下,我认为人们习惯于在他们选择的浏览器中呈现字体。

答案 3 :(得分:0)

在Photoshop中,可以选择“平滑”文本。

See this image。右下角。

删除此反定位图,以便更好地查看字体在浏览器中的外观(但不完全确切)。