即使使用相同的 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就不能在网络上使用的字体。
字体 opentype 文本渲染