浏览器之间的 CSS 字体差异 [英] CSS font differences between browsers

问题描述

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

我正在使用他们都支持的 helvetica.

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

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

解决方案

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

1. 现代字体格式由重叠指令层组成，其中新的更好"的方式不会取代以前的迭代，而是除了这些之外还存在.优点是旧软件仍然可以读取旧式指令并像以前一样工作.缺点是相同的属性以多种不同的方式描述，并且它们不会给出相同的结果(您可能认为最新的层会给出最好的结果，但字体设计者可能只对较旧的层进行了广泛的测试和调试)

2. 雪上加霜的是，有些是特定于系统的(Windows、OS∕2、OSX...)，因此即使是同一代软件也不会根据目标系统读取相同的指令

3. 最后，即使字体只包含一个指令层，并且您的所有浏览器都完全阅读了它，他们在解释它时也会有一些余地.在具有高像素密度的理想视网膜屏幕上，它们都将使用相同的形状和坐标，但实际屏幕的像素密度太低，无法准确显示小的复杂文本形状.因此，文本引擎可以选择显示清晰但枯燥的线条(扭曲字形形状，使它们捕捉到单色像素网格)或平滑但模糊的线条(通过在像素灰度级别甚至子像素颜色上播放来近似理想形状).这些调整将移动文本像素.
   取决于系统的文本呈现约定是不相同的.OSX 将倾向于平滑的模糊渲染，Windows 将倾向于锐化的渲染，而 Linux 则涵盖了两者之间的所有选择.

4. 当然，即使在相同的系统上，相同的软件也不会根据可用硬件的质量(像素密度)做出相同的选择.

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

您通常无法从您的网站控制浏览器选择的文本渲染妥协.即使您可以在 osx(或相反)上强制使用 windows 风格的渲染，也只会惹恼那些希望您的网站表现得像他们在屏幕上看到的所有其他文本的用户.事实上，你的网站对浏览器的字体渲染选择越宽容，它就会越好.网站是动态的.网站可以回流.像素完美不是用户的理想选择.如果您想要像素完美，请为他们提供位图图像，您很快就会看到它的受欢迎程度.

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

附注.Helvetica 是一种古老的字体设计.在不同的系统上请求'Helvetica' 已经衍生了很多次会产生大量的结果.所以这是一个没有@font-face就不能在网络上使用的字体.

字体 opentype 文本渲染

I am trying to display some text exactly the same in all browsers.

I'm using helvetica, which they all support.

I've found (the hard way) that each browser styles text it's own way, so I'm wondering, what properties do I have to customize in order to get the text 100% same on all major browsers?

The properties I've already set are: font-family, font-size, font-weight, line-height, text-decoration and letter-spacing, but looking at my text in ff and chrome, I see a difference in the width of a given text. I think height is the same.

解决方案

Even with identical CSS rules and identical font files you will never have exactly identical rendering:

1. modern font formats are composed of layers of overlapping instructions, where the "new better" way does not replace previous iterations, but is present in addition to those. The advantage is that old software can still read the old-style instructions and work as before. The disadvantage is that the same property is described in many different ways and they do not give the same results (you'd think the newest layer would give the best results but the font designer may have only extensively tested and debugged an older one)

2. to add insult to injury some are system-specific (Windows, OS∕2, OSX…) so even the same generation of software won't read the same instructions depending on the target system

3. lastly even if a font only contained a single instruction layer, and all your browsers read it completely, they would have some leeway in interpreting it. On an ideal retina screen with high pixel density they'll all use the same shapes and coordinates, but actual screens have too low pixel densities to display small complex text shapes accurately. So the text engines have a choice between displaying sharp but jaded lines (distorting the glyph shapes so they snap to a monochrome pixel grid) or smooth but blurry lines (approximating ideal shapes by playing on pixel grayness level or even subpixel colors). Those adjustments will move text pixels around.
   Depending on the system text rendering conventions are not identical. OSX will lean towards smooth blurry rendering, Windows towards sharp jaded rendering, and the Linuxes cover all the choices in-between.

4. And of course, even on the same system the same software won't make the same choices depending on the quality (pixel density) of the hardware available.

For some insight on all the possible rendering strategies a text engine can choose see
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

You can not usually control the text rendering compromise chosen by the browser from your web site. Even if you could forcing windows-style rendering on osx (or the reverse) would only annoy uses that want your web site to behave like all the other text they see on their screen. And in fact, the more tolerant your web site will be to browser's font rendering choices, the better it will be. A web site is dynamic. A web site can reflow. Pixel-perfect is not a user ideal. If you want pixel-perfect, serve them a bitmap image, and you'll quickly see how much it is appreciated.

Therefore, only use @font-face for specific design effects, and not to try to force a specific text pixel placement on your site. The first will work beautifully. The second, not at all. If you use @font-face do remember fonts are covered by copyright so sharing any font requires legal permission.

PS. Helvetica is an old font design. It has been derived so many times requesting 'Helvetica' on different systems will yield a plethora of results. So this is a font that can not be used on the web without @font-face.

fonts opentype text-rendering

这篇关于浏览器之间的 CSS 字体差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！