如何让你的网站在 Linux 上看起来一样

题

我有一个相当符合标准的 XHTML+CSS 网站，在 PC 和 Mac 上的所有浏览器上看起来都很棒。有一天，我在 Linux 上的 FF3 上看到它，字母间距稍微大一些，一切都变得不正常，并导致不必要的文本换行和剪切。有问题的 CSS 有

font-size: 11px;
font-family: Arial, Helvetica, sans-serif;

我知道它与通用无衬线字体一起使用，无论映射到什么。如果我添加以下内容，文本就会变得足够接近我在其他平台上得到的内容：

letter-spacing: -1.5px;

但这会涉及一些令人讨厌的服务器端操作系统嗅探。如果有一个纯 CSS 解决方案，我很想听听。

有问题的系统是 Ubuntu 7.04，但这无关紧要，因为我希望至少为大多数（如果不是全部）Linux 用户修复它。当然，要求用户安装字体不是一个选择！

解决方案

尺寸/间距差异通常很难发现。您可以做的是创建一个特定于 Linux 的 CSS 文件，其中包含针对 Linux 调整的这些值，然后执行一个简单的基于 JS 的检测以注入该 CSS（如果用户代理是 Linux 代理）。

这可能不是最干净的方法，但它会起作用，并且对干净的 HTML/CSS 的干扰最小。

其他提示

A List Apart 有一个漂亮的关于 CSS 中字体大小的综合文章. 。他们的结论是使用“ems” 来调整文本大小，因为它通常会在浏览器之间提供最一致的大小调整。他们没有直接提及不同的操作系统，但您应该尝试使用 em。它可能会解决你的问题。

你在 Windows 上的 FF3 中尝试过吗？

就我个人而言，我发现良好的 CSS Reset 对于使您的页面在所有浏览器中看起来都相同大有帮助。

我发现解决浏览器之间字体大小问题的最简单方法就是简单地留出错误空间。使 div 稍大或字体稍小，以便平台变化不会显着改变换行或剪裁。

除非您的网站预期基于 Linux 的流量高于正常水平，否则如果您“牺牲用户调整其阅读环境的能力”而不是不关心 Linux，则可能会对更多人产生不利影响经验。

话虽如此，如果你做想要获得良好的 Linux 体验，您应该解决设计在字体间距的微小变化下崩溃的原因，因为这些问题在当前的 CSS 实现下很难控制。

许可以下： CC-BY-SA 和归因