字体面重量渲染问题

时间:2014-05-12 22:02:22

标签: css wordpress css3 font-face

我正在将网站从现有的CMS迁移到WordPress。他们在网站上使用font-face作为主要类型。我复制了字体文件并复制了CSS文件但看起来开发站点上的字体与初始站点上的字体不同(开发站点的加权字体较轻)。

任何人都知道为什么会这样?

开发网站:http://gldev.staging.wpengine.com

原始网站:http://growingleaders.com

3 个答案:

答案 0 :(得分:0)

您的开发网站外观较轻,因为它使用

 -webkit-font-smoothing: antialiased;

使字体显得更轻。为了这个目的,这经常是这样做的,尽管这样做是somewhat problematic

规则应用于已编译CSS文件的第19行,应用于所有元素。

答案 1 :(得分:0)

与原始版本相比,Dev页面存在一些差异。如果你看一下名为screen.css的CSS文件,这两个网站上的文件就完全不同了,这就是字体不同的原因之一。此外,还有13个CSS文件链接到原始页面,15个链接到Dev页面。脚本也不同,所以如果存在比字体渲染更大的差异,我也不会感到惊讶。

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

答案 2 :(得分:0)

我找到了解决方案。

显然在代码中使用text-rendering:optimizeLegibility;会导致webkit渲染比FireFox更薄的字体。一旦从HTML& body CSS,字体渲染相同的权重交叉broswer。