3

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

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

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

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

4

4 回答 4

3

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

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

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

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

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

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

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

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

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

于 2013-08-29T21:57:57.010 回答
1

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

于 2012-04-29T06:57:28.247 回答
1

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

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

于 2012-04-29T07:04:01.933 回答
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/

于 2012-04-29T07:13:01.467 回答