CSS字体跨浏览器兼容性

时间:2011-12-02 23:23:16

标签: css fonts cross-browser

我已经阅读了一些关于css交叉兼容性的教程,其中提到了css重置表和一些其他技术,但我还没有能够创建一个在多个浏览器上看起来完全相同的字体的网站。我已经从pt切换到了px,并采用了一些其他技术,这些技术有所帮助。有人知道更好的技术吗?

由于

3 个答案:

答案 0 :(得分:2)

如果您希望字体完全相同(大小和全部)并且您只谈论标题,那么您可能想尝试使用图像。

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

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

http://www.fontsquirrel.com/fontface

答案 1 :(得分:0)

我不知道你说话有多精确,但在每个浏览器中它都不会完全(对于像素)。例如,我注意到OS X倾向于使字体更宽(由于它对文本的反锯齿),而不是Windows。不同的浏览器渲染字体,甚至是相同的字体,略有不同,有时可以添加多个像素,具体取决于您的布局。

答案 2 :(得分:0)

除了已经提到的那些之外,

typekit也可能是你的解决方案。

https://typekit.com/

您必须知道,用户计算机只能显示您选择的字体,如果他们的计算机上确实有这些字体。

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

如果您选择了一种名为“超级字体”的字体,则用户计算机将不会显示此确切字体,因为它们可能没有在其计算机上显示该字体。正如你的CSS中所宣称的那样,用户机器现在可以查看大多数计算机在其机器上具有的替代“Helvetica”,因此将显示“Helvetica”。如果没有“Helvetica”可用,用户机器将显示无衬线字体。

以下是常见字体列表:Link

你已经看到,它们的外观和字体重量有所不同,因为它们的呈现方式与Nate B已经提到的不同。

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

这是一篇关于声明字体大小的不同方法的好文章:Link

如果您想深入挖掘并了解如何控制不同设备的字体大小,请查看以下文章:Link