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

问题描述

我使用的是helvetica，他们都支持。

我发现（硬的方式），每个浏览器样式文本它自己的方式，所以我想知道，我有自定义的属性为了获得文本100％相同的所有主要浏览器？

我已经设置的属性是：
font-family ， font-size ， font-weight ， line-height code> text-decoration 和 letter-spacing ，但是看到我的文本在ff和chrome，我看到宽度的差异的给定文本。我认为高度是一样的。

解决方案

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

1. 现代字体格式由重叠指令组成，其中新的更好方式不会替换先前的迭代，除此之外。优点是旧软件仍然可以读取旧式指令并像以前一样工作。缺点是相同的属性以多种不同的方式描述，并且它们没有给出相同的结果（你会认为最新的图层会给出最好的结果，但是字体设计器可能只是广泛地测试和调试旧的） / p>




2. 添加侮辱某些是系统特定的（Windows，OS / 2，OSX ...），所以即使同一代软件不会读取根据目标系统的指令




3. 最后，即使字体只包含一个指令层，并且所有浏览器都完全读取它们，他们将有一些余地解释它。在具有高像素密度的理想视网膜屏幕上，它们将使用相同的形状和坐标，但是实际屏幕具有太低的像素密度以准确地显示小的复杂文本形状。因此，文本引擎可以在显示锐利但是虚线之间（使字形形状变形，使得它们捕捉到单色像素网格）或平滑但模糊的线（通过在像素灰度水平或甚至子像素颜色上接近理想形状）来选择。这些调整将移动文本像素。
   
   根据系统文本呈现规则不同。




4. 当然，即使是在第三方应用程序中，

有关文本引擎可以选择的所有可能的渲染策略的一些见解，请参阅

https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

您通常无法控制浏览器从您的网站。即使你可以强制窗口式渲染osx（或相反）只会烦人的使用，希望你的网站的行为像所有其他文本，他们看到在他们的屏幕上。事实上，你的网站对浏览器的字体渲染选择越宽容，它就越好。网站是动态的。网站可以回流。像素完美不是用户的理想。

因此，只能使用@ font-face来指定特定的设计效果，而不是试图强制您的网站上的特定文字像素展示位置。第一个会工作得很漂亮。第二，不是。如果您使用@ font-face，请记住字体受版权保护，因此共享任何字体都需要法律许可。

PS。 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屋！