Question

我在测试环境中加载了以下page。

首先，这些字体已获得适当许可，并已从myfonts.com下载并声明如下：

@font-face {font-family: 'HelveticaNeueLT';src: url('css/webfonts/3019F7_2_0.eot');src: url('css/webfonts/3019F7_2_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_2_0.woff2') format('woff2'),url('css/webfonts/3019F7_2_0.woff') format('woff'),url('css/webfonts/3019F7_2_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Bold';src: url('css/webfonts/3019F7_1_0.eot');src: url('css/webfonts/3019F7_1_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_1_0.woff2') format('woff2'),url('css/webfonts/3019F7_1_0.woff') format('woff'),url('css/webfonts/3019F7_1_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Light';src: url('css/webfonts/3019F7_3_0.eot');src: url('css/webfonts/3019F7_3_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_3_0.woff2') format('woff2'),url('css/webfonts/3019F7_3_0.woff') format('woff'),url('css/webfonts/3019F7_3_0.ttf') format('truetype');}

如果您查看Chrome for PC（v47）中的页面，您会看到文字高度像素化，最明显的是Contact Us button。在Chrome for Mac中，按钮非常清晰。粗略估计，这是30％，因为Chrome for Mac渲染引擎使页面更清晰，70％，因为我将以下代码添加到按钮的CSS规则中：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;

有没有人想过这里发生了什么？您可以查看stylesheet，看看是否有任何问题可以解决问题。

Answer 1

不是专家，但摆弄检查员我注意到两件事

http://184.106.89.208/wp-content/themes/blueprint2016/font/stylesheet.css无法加载资源：服务器响应状态为404（未找到）
你在字体上强制16px，不知怎的，这对你的字体来说非常糟糕。如果我从.live_more_btn删除16px，那么它looks可以接受。

具有适当许可和声明的Web字体的字体像素化

1 个答案: