logo标签列表

各浏览器中CSS字体的差异

cssfonts
3

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

我正在使用Helvetica字体，它们都支持。

我已经发现（通过艰难的方式），每个浏览器都有自己的文本样式，因此我想知道，我必须自定义哪些属性才能在所有主要浏览器上获得100％相同的文本？

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

3
简短回答：这是不可能的。Helvetica有许多不同的版本，即使没有，如其他人所指出的，字体渲染（平滑）方法在浏览器和操作系统之间也会有所不同 - 更不用说用户可以覆盖您的样式。如果您的设计不能容忍细微差别，那么设计就有问题。 - steveax
@steveax，“不可能”这个答案是一个好的、有效的答案。我只是在自责，试图找出每个浏览器之间有什么不同的CSS属性，以便我可以自定义它。 - ppp
4个回答
3
即使使用相同的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”将产生大量结果。因此，这是一种不能在Web上使用的字体，除非使用@font-face。
1
1

正如Pleun所提到的，有几个重置样式表可以为您提供良好的起点。但是，无论您如何努力，也不会得到完全相同的外观。这是因为浏览器和操作系统使用不同的字体呈现策略。

一些浏览器允许您控制字体呈现技术。对于Webkit浏览器，请查看此处http://maxvoltar.com/archive/-webkit-font-smoothing

0
所有浏览器都“支持”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在我的网络安全字体搜索中出现，所以我认为主流浏览器应该支持它，但知道这一点还是很好的。 - ppp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接