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

Question

我在很多不同的网站上都遇到过这个问题。您的字体具有不同的抗锯齿选项，设计师在网络上文本的不同部分使用具有不同抗锯齿选项的相同字体。因此，某些元素之间存在差异。

在这种情况下，我有锋利、清脆、强韧和光滑。我使用了字体生成器来获取通过@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

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