浏览器之间的 CSS 字体差异答案

【问题标题】：CSS font differences between browsers浏览器之间的 CSS 字体差异
【发布时间】：2012-05-09 08:44:15
【问题描述】：

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

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

我发现（很难）每个浏览器都以自己的方式设置文本样式，所以我想知道，我必须自定义哪些属性才能在所有主要浏览器上获得 100% 相同的文本？

我已经设置的属性是： font-family、font-size、font-weight、line-height、text-decoration 和 letter-spacing，但在 ff 和 chrome 中查看我的文本时，我发现给定文本的宽度有所不同。我认为高度是一样的。

【问题讨论】：

简短回答：不可能。 Helvetica 有许多不同版本，即使没有，正如其他人所指出的，字体渲染（平滑）方法因浏览器和操作系统而异——更不用说用户可以覆盖您的样式。如果您的设计无法适应细微的差异，则说明设计有问题。
@steveax 答案“不可能”是一个好的、有效的答案。我只是在努力寻找每个浏览器之间不同的 CSS 属性，以便我可以自定义它。

标签： css fonts

【解决方案1】：

您可以从 Yahoo http://yuilibrary.com/yui/docs/cssreset/ 的重置脚本开始

【讨论】：

【解决方案2】：

正如 Pleun 所提到的，有几个重置样式表可以为您提供良好的开端。但是，只要你努力，你就不会得到 100% 相同的外观。这是因为浏览器和操作系统使用不同的字体渲染策略。

某些浏览器允许您控制字体渲染技术。对于 webkit 浏览器，请看这里http://maxvoltar.com/archive/-webkit-font-smoothing

【讨论】：

【解决方案3】：

所有浏览器都“支持”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/

【讨论】：

很高兴知道这一点，尽管 helvetica 在我搜索网络安全字体时出现了，所以我立即得出结论，主流浏览器都可以使用它。

【解决方案4】：

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

现代字体格式由重叠的指令层组成，其中“新的更好”方式不会取代以前的迭代，但除此之外还存在。优点是旧软件仍然可以读取旧式指令并像以前一样工作。缺点是相同的属性以许多不同的方式描述并且它们不会给出相同的结果（你会认为最新的层会给出最好的结果，但字体设计者可能只是广泛地测试和调试了旧的层）
雪上加霜的是，有些是系统特定的（Windows、OS∕2、OSX...），因此即使是同一代软件也不会根据目标系统读取相同的指令
最后，即使一种字体只包含一个指令层，并且所有浏览器都可以完全读取它，它们在解释它时会有一些余地。在具有高像素密度的理想视网膜屏幕上，它们都将使用相同的形状和坐标，但实际屏幕的像素密度太低，无法准确显示复杂的小文本形状。因此，文本引擎可以选择显示清晰但陈旧的线条（扭曲字形形状，使其对齐单色像素网格）或平滑但模糊的线条（通过播放像素灰度级甚至亚像素颜色来近似理想形状）。这些调整会移动文本像素。
根据系统的不同，文本呈现约定并不相同。 OSX 将倾向于平滑的模糊渲染，Windows 将倾向于锐利的疲惫渲染，而 Linux 则涵盖了介于两者之间的所有选择。
当然，即使在相同的系统上，相同的软件也不会根据可用硬件的质量（像素密度）做出相同的选择。

有关文本引擎可以选择的所有可能呈现策略的一些见解，请参阅
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

您通常无法控制浏览器从您的网站选择的文本呈现折衷方案。即使您可以在 osx（或相反）上强制执行 windows 样式的渲染，也只会惹恼那些希望您的网站表现得像他们在屏幕上看到的所有其他文本一样的用户。事实上，您的网站对浏览器的字体呈现选择越宽容，它就会越好。网站是动态的。网站可以重排。像素完美不是用户的理想。如果您想要完美的像素，请为他们提供位图图像，您很快就会看到它有多受欢迎。

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

PS。 Helvetica 是一种古老的字体设计。它已经派生了很多次，在不同的系统上请求“Helvetica”会产生过多的结果。所以这是一种没有@font-face就不能在网络上使用的字体。

fonts opentype text-rendering

【讨论】：