在Mozilla Firefox中呈现Google字体错误

Question

我发现曾经遇到同样问题的人我能解决这个问题。 现在我有同样的问题，经过2小时的搜索，我找不到解决方案。

此问题出现在使用谷歌字体的所有网站上。 在Internet Explorer中，一切看起来都不错，所以看起来问题出现在计算机上，而不是网站本身。

以下是我在firefox中看到的截图：

以下是Internet Explorer的屏幕截图：

正如您所看到的，大多数字母顶部都有一个“点”，并且没有“抗锯齿”（这在没有缩放时进行测试 - CTRL 0） 如果我放大（CRTL +）而不是“点消失”并且文本开始看起来正常。

到目前为止我尝试过：

1）我的电脑＆gt;属性＆gt;高级＆gt;表现＆gt;视觉效果＆gt; “屏幕字体的平滑边缘”＆gt;选择

2）控制面板＆gt;个性化＆gt; <窗口颜色和外观>字体＆gt;调整ClearType文字＆gt;打开ClearType

3）Firefox＆gt;工具＆gt;选项＆gt;高级＆gt;一般＆gt;浏览：“在可用时使用硬件加速”＆gt;禁用

4）Firefox＆gt; about：config＆gt; gfx.content.azure.enabled＆gt;假（我没有这个）

5）Firefox＆gt; about：config＆gt; gfx.direct2d.disabled＆gt;真

6）Firefox＆gt; about：config＆gt; layers.acceleration.disabled＆gt;真

Answer 1

您从未提及您使用的特定类型的webFont。我通过测试发现，当clearType打开时，FireFox渲染woff和woff2字体很差。您可以简单地确保在CSS @ font-face规则中引用trueType字体，这将解决几乎所有主流浏览器的问题。但是，trueType字体相当大，因此这会以加载时间/大小为代价。

更优雅的解决方案需要向FireFox提供trueType字体，而向大多数其他浏览器提供woff或woff2。

详细说明：

浏览器webFont兼容性的大多数解决方案都需要将不同字体类型的URL堆叠起来，最先得到最喜欢的字体，如下所示：

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

浏览器尽职地解析该列表并加载他们理解的第一种格式。

这里的问题是虽然Firefox可以使用woff2或woff，但是当clearType打开时它会非常糟糕，它几乎总是如此。所以可取的是FireFox更像这样的css块：

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.ttf') format('trueType');         
}

因此挑战变成了如何做到这一点。我使用.less来完成此操作以传入代码并输入变量，如下所示：

<link href="myBaseURL.css?fontCode=<desiredCode>&fontType=<desiredType>" rel="stylesheet" type="text/css" />

在CSS规则中：

@fontType: svg; /*default*/
@fontCode: svg; /*default*/

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.@{fontCode}') format('@{fontType}'), 
        url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

然后根据浏览器传入所需的fontCode和fontType - 基本上检测FireFox并传递'ttf'和'trueType'：

<link href="myBaseURL.css?fontCode=ttf&fontType=trueType" rel="stylesheet" type="text/css" />

使用.less会产生这个输出：

@fontType: svg; /*default*/
@fontCode: svg; /*default*/

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.ttf') format('trueType'), 
        url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

有点重复，但因为FireFox会加载它可以渲染的第一个引用，所以.ttf字体会被加载。