字体粗细渲染问题答案

【问题标题】：Font Face Weight Render Issue字体粗细渲染问题
【发布时间】：2014-05-13 20:57:07
【问题描述】：

我正在将网站从现有 CMS 迁移到 WordPress。他们在网站上使用字体作为主要类型。我已经复制了字体文件并复制了 CSS 文件，但开发站点上的字体似乎与初始站点上的字体不同（开发站点的字体较轻）。

有人知道为什么会这样吗？

【问题讨论】：

【解决方案1】：

您的开发网站具有较浅的字体外观，因为它使用了

 -webkit-font-smoothing: antialiased;

这使字体看起来更轻。经常这样做就是为了这个目的，尽管这样做是somewhat problematic

该规则应用于您编译的 CSS 文件的第 19 行，应用于所有元素。

【讨论】：

【解决方案2】：

与原始页面相比，开发页面有几个不同之处。如果您查看名为 screen.css 的 CSS 文件，这两个站点上的文件完全不同，这就是字体不同的原因之一。此外，有 13 个 CSS 文件链接到原始页面，15 个链接到开发页面。脚本也不同，所以如果存在比字体渲染更大的差异，我不会感到惊讶。

复制 WP 网站有时比复制文件更棘手。我建议你使用一个好的迁移工具。那里有一些。

【讨论】：

【解决方案3】：

我找到了解决方案。

显然，在您的代码中包含text-rendering:optimizeLegibility; 会导致 webkit 呈现比 FireFox 更薄的字体。一旦从 HTML 和 body CSS 中删除，字体会呈现相同的权重跨浏览器。

【讨论】：