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

Posted 2023-03-05

【中文标题】如何让你的网站在 Linux 上看起来一样

【英文标题】：How to make your website look the same on Linux

【发布时间】：2010-09-08 00:45:55

【问题描述】：

我有一个相当符合标准的 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 用户修复它。当然要求用户安装字体不是一种选择！

【参考方案1】：

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

话虽如此，如果您确实想要良好的 Linux 体验，您应该解决您的设计在字体间距的微小变化下出现问题的原因，因为这些问题在当前情况下难以控制CSS 实现。

【参考方案2】：

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

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

【参考方案3】：

A List Apart 有一个漂亮的comprehensive article on sizing fonts in CSS。他们的结论是使用“ems”来调整文本大小，因为它通常会在浏览器中提供最一致的大小。他们没有直接提到不同的操作系统，但你应该尝试使用 ems。它可能会解决您的问题。

【讨论】：

在这种情况下，我愿意牺牲用户调整阅读环境的能力。也许我应该编辑问题的“相当符合标准”部分;-)

【参考方案4】：

你在windows上试过FF3吗？

就我个人而言，我发现一个好的 CSS 重置对于让您的页面在所有浏览器中看起来都一样大有帮助。

【参考方案5】：

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