浏览器之间的CSS字体差异

时间:2012-04-29 06:54:08

标签: css fonts

我试图在所有浏览器中显示完全相同的文字。

我正在使用helvetica,他们都支持。

我发现(困难的方式)每个浏览器以自己的方式设置文本样式,所以我想知道,为了在所有主流浏览器上使文本100%相同,我必须自定义哪些属性?

我已经设置的属性是: font-familyfont-sizefont-weightline-heighttext-decorationletter-spacing,但是看看我在ff和chrome中的文字,我看到了不同之处在给定文本的宽度。我认为身高是一样的。

4 个答案:

答案 0 :(得分:3)

即使使用相同的CSS规则和相同的字体文件,您也永远不会有完全相同的渲染:

  1. 现代字体格式由重叠指令层组成,其中“新的更好”方式不会替代先前的迭代,但除此之外还存在。优点是旧软件仍然可以读取旧式指令并像以前一样工作。缺点是相同的属性以许多不同的方式描述,并且它们没有给出相同的结果(你认为最新的层会产生最好的结果,但字体设计师可能只对旧版本进行了广泛的测试和调试)< / p>

  2. 添加侮辱伤害的一些是系统特定的(Windows,OS / 2,OSX ......)所以即使是同一代软件也不会根据目标系统读取相同的指令

    < / LI>
  3. 最后,即使字体只包含一个指令层,并且所有浏览器都完全读取它,它们在解释它时也会有一些余地。在具有高像素密度的理想视网膜屏幕上,它们都使用相同的形状和坐标,但实际屏幕具有太低的像素密度以准确地显示小的复杂文本形状。因此,文本引擎可以选择显示清晰但粗糙的线条(扭曲字形形状以使其捕捉到单色像素网格)或平滑但模糊的线条(通过在像素灰度级别甚至子像素颜色上播放来近似理想形状)。这些调整将移动文本像素 根据系统文本呈现惯例不相同。 OSX将倾向于平滑模糊渲染,Windows倾向于尖锐的jaded渲染,而Linux则涵盖了介于两者之间的所有选择。

  4. 当然,即使在同一系统上,相同的软件也不会做出相同的选择,具体取决于可用硬件的质量(像素密度)。

  5. 有关所有可能的渲染策略的一些见解,文本引擎可以选择参见
    https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

    您通常无法控制浏览器从您的网站选择的文本呈现方式。即使你可以在osx上强制执行windows风格的渲染(或反过来)也只会让你想要你的网站的用户感觉像他们在屏幕上看到的所有其他文字一样。事实上,您的网站对浏览器的字体呈现选择的容忍度越高,它就越好。一个网站是动态的。网站可以重排。像素完美不是用户的理想选择。如果你想要像素完美,为它们提供一个位图图像,你就会很快看到它的价值。

    因此,仅将@ font-face用于特定的设计效果,而不是尝试强制在您的网站上放置特定的文字像素。第一个将很好地工作。第二,完全没有。如果您使用@ font-face,请记住字体受版权保护,因此共享任何字体都需要获得法律许可。

    PS。 Helvetica是一种古老的字体设计。很多时候,在不同的系统上请求“Helvetica”会产生大量的结果。所以这是一种没有@ font-face就无法在网上使用的字体。

答案 1 :(得分:1)

您可以从Yahoo http://yuilibrary.com/yui/docs/cssreset/

的重置脚本开始

答案 2 :(得分:1)

正如Pleun所说,有几个重置样式表可以为您提供良好的开端。但是,尽管你努力尝试,你将无法获得100%相同的外观。这是因为浏览器和操作系统使用的字体渲染策略不同。

某些浏览器允许您控制字体呈现技术。对于webkit浏览器,请查看http://maxvoltar.com/archive/-webkit-font-smoothing

答案 3 :(得分:0)

所有浏览器“支持”helvetica?你会说哪些浏览器?这里列出了大量的浏览器http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack,它们没有或者至少不能使用helvetica。除非您向他们提供helvetica的许可版本。我假设你不是。

该链接是关于为跨浏览器/平台helvetica构建更好的字体堆栈...虽然这是一个强大的堆栈,你可能不需要它。你可以找到其他人,阅读更多:

http://css-tricks.com/snippets/css/better-helvetica/

http://www.awayback.com/revised-font-stack/

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/