如何使用CSS访问字体的抗锯齿方法

Question

我在很多不同的网站上遇到过这个问题。您有一个具有不同抗锯齿选项的字体，设计人员在Web上的文本的不同部分使用相同的字体和不同的抗锯齿选项。所以某些元素之间存在差异。

在这种情况下，我有锋利，清脆，强壮和光滑。我已经使用字体生成器来获取代码以通过@ font-face访问它。即便如此，如果知道的话，我也有原始的.otf。有没有方法可以访问它？

我上传了我的意思和实际代码的图片：

@font-face {
    font-family: 'light';
    src: url('../_fnt/light/gothamrnd-light.eot');
    src: url('../_fnt/light/gothamrnd-light.eot?#iefix') format('embedded-opentype'),
             url('../_fnt/light/gothamrnd-light.woff') format('woff'),
             url('../_fnt/light/gothamrnd-light.ttf') format('truetype'),
             url('../_fnt/light/gothamrnd-light.svg#../_fnt/light/gothamrnd-light') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

不，没有办法以这种方式控制文本的呈现。这些是Photoshop特定的设置，因为它有自己的渲染引擎，甚至不能用于其他程序。

实际上，不同的浏览器会以不同的方式呈现文本，甚至不同计算机上的同一浏览器也会根据系统设置对其进行不同的渲染。

如果您在一个浏览器中使页面看起来与设计完全相同，那么在另一个浏览器中它看起来会有所不同。您通常应该在不同的浏览器中对其进行测试，并尝试使其在大多数浏览器中尽可能接近设计，并确保它们与任何设计中的设计相距太远。

Answer 2

Mac OS X上只有WebKit浏览器识别出与字体平滑相关的CSS属性，即-webkit-font-smoothing。即使在那里，也不清楚发生了什么，因为它们似乎正在删除antialiazed值，请参阅webkit-font-smoothing: suddenly different results in chrome and safari

因此，出于实际目的，将字体平滑视为作者不在你的手中，并在不同的平滑选项下测试字体以检查结果是否至少是可以容忍的。