2011-12-02 232 views
2

我读过一堆关于css交叉兼容性的教程,其中提到了css重置表和其他一些技巧,但我还没有能够创建一个网站,其字体看起来完全相同浏览器。我已经从pt切换到px,并纳入了其他一些帮助一些的技术。任何人都知道更好的技术?CSS字体跨浏览器兼容性

感谢

+0

可能重复[什么是正确的方式来处理css浏览器兼容性?](http://stackoverflow.com/questions/808902/what-is-the-correct-way-to-deal- with-css-browser-compatibility) –

+0

你用什么字体/重量?你会想要一个非常强大的字体堆栈 – albert

+0

对于一些我不宣布任何东西,其他我用过大胆和斜体。字体家族我一直在使用Arial,Helvetica,sans-serif – Josh

回答

0

我不知道你是如何准确的讲,但它永远不会是完全(对像素)的每一个浏览器一样。例如,我注意到OS X往往会使字体比在Windows上更宽(由于它会消除文本的别名)。不同的浏览器渲染字体,即使是相同的字体,略有不同,有时可能会添加多个像素,具体取决于您的布局。

+0

我明白这一点。我会澄清我的问题。我只是希望能够在多个浏览器中打开它们,并且能够说“是的,它们是相同的字体”。我不希望它们是像素的像素。 – Josh

2

如果你想要字体看起来完全相同相同(大小和全部),你只谈论标题,那么你可能想尝试使用图像。

但是,更好的方法是使用@font-face和一些生成的字体。

查看FontSquirrel,它为多个浏览器生成单独的字体文件。

http://www.fontsquirrel.com/fontface

1

typekit可能也已经提到的那些身边为你解决。

https://typekit.com/

你必须意识到的是,用户机只能显示如果他们真的有他们的计算机上这些字体您已经选择的字体。

f.e font-family: "Super Font", Helvetica, sans-serif;

如果您已经选择了一个名为“超级字体”用户机将不显示这个确切的字体,因为他们可能没有它自己的机器上的字体。正如您在CSS中声明的那样,用户机器现在将看看大多数计算机在其机器上具有的替代“Helvetica”,因此将显示“Helvetica”。如果甚至没有“Helvetica”可用,用户机器将显示sans-serif字体。

下面是常见的字体列表:Link

你已经看到,他们不同的一点在它们的外观和字体重量内特乙已经提到的原因,他们得到呈现不同。

如果您想使用您的“超级字体”,请按照Jason Gennaro推荐的http://www.fontsquirrel.com/fontface。在这里你不仅可以从很多免费字体中选择一种字体,而且还可以使用@ font-face生成器来上传自己的字体,并获得将它们直接构建到CSS中的所有内容,以便每台机器都可以能够显示它们(只要支持@ font-face,Link)。即使它已经得到很好的支持,也总是声明一个备用字体。

这里是一个很好的博客文章对不同的方式来声明字体大小:Link

如果你想挖一个深一点,并找出如何控制字体大小在不同的设备,看看这个文章:Link

+0

感谢您的信息。我对Google,Facebook和Hulu等网站在每个浏览器中呈现相同的字体感兴趣。在大多数情况下,他们的网站在任何浏览器中都几乎完全相同。 – Josh