Google 字体无法在 Firefox 中正确呈现答案

【问题标题】：Google Font not rendering correctly in FirefoxGoogle 字体无法在 Firefox 中正确呈现
【发布时间】：2017-03-02 09:34:10
【问题描述】：

我在我的网站上使用了一种谷歌网络字体，Titillium Web。它在 Google Chrome、IE、Opera 和 Safari 中完美呈现，但在 Firefox 中文本看起来很糟糕。

Google 字体链接：

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

HTML：

<p id="main-top-text" class="txt-style">WELCOME TO <span class="site-colour">NATHAN DA SILVA,</span></p>

<p id="main-bottom-text" class="txt-style">ENJOY YOUR STAY.</p>

CSS：

.txt-style {
    font-family: 'Titillium Web', sans-serif;
    font-size: 60px;    
    line-height: 70px;
    color: #666666;
    text-align: center;
}

你可以在这里看到它的样子：http://www.nathandasilva.co.uk/v3

我想没有人知道任何修复方法可以让这个在 Firefox 中看起来更好？

【问题讨论】：

我可以确切地看到你在说什么。基本上，字体看起来不像在其他浏览器中那样平滑。不幸的是，您对此无能为力。这是不同的浏览器呈现字体的方式以及它呈现它们的字体文件。

标签： html css google-font-api

【解决方案1】：

我经常发现声明字体粗细会有所帮助。

font-weight: 200;

【讨论】：

【解决方案2】：

我遇到了所有 Google 网络字体（尤其是 Roboto）的问题，发现我需要强制 Direct2d 加速开启来修复它。我的显卡是 Intel HD4000。

发布对我有用的解决方案，以防它与您或其他读者相关：

转到 about:config
找到gfx.direct2d.force-enabled
设置为 True 并重新启动 Firefox

【讨论】：

【解决方案3】：

最后看起来不错，请尝试清除浏览器缓存，然后重试。

【讨论】：

【解决方案4】：

我也有同样的问题！我正在使用最新版本的 Firefox (23) 和 Windows (8)。我的笔记本电脑中还有一个隐蔽的（板载）AMD 显卡，它相当弱。

在升级之前，我在 Windows 7 中没有遇到此问题。

经过一番调查，我发现了以下内容：

我似乎一般都有 cleartype 的问题，因为当我查看启用 cleartype 的细字体（通过控制面板 > 字体）时，它们看起来非常像素化。关闭 cleartype 后，它们看起来更平滑，但没有出色的亚像素渲染，因此它们不会像应有的那样超级清晰。
我计算机上安装的每个浏览器（IE、Opera、Chrome、Firefox）对细字体的处理方式不同。 Opera 具有与 Firefox 类似的像素化功能。 Chrome 可以很好地处理 Titillium，但不能处理 Glypha LT（The Expressive Web 上的标题字体）。具有讽刺意味的是，IE 是唯一能完美处理所有细字体的浏览器。

【讨论】：

【解决方案5】：

显然 Firefox 默认会阻止“跨站点”的字体以防止 XSS 攻击。

您可以在 Firebug 中判断字体是否已加载，因为它们会在样式选项卡中显示为“灰色”（当您检查 HTML 元素时）。

另外，尝试检查 Firefox 的内置开发者控制台（菜单 > Web 开发者 > Web 控制台）并查找加载字体的错误（Firebug 似乎没有报告这些错误）。这将帮助您确定问题所在。

要解决此问题，您可以将您的网站配置为接受外部字体，例如：

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

对于其他字体（即不是来自 Google），如果您可以在服务器上托管这些字体，您也可以参考它们来解决问题。例如：

@font-face { 
  font-family: 'museo_sans_100regular'; 
  src: url('/wp-content/uploads/museosans_100-webfont.eot'); 
  src: local('☺'), local('museo_sans_100regular'), 
    url('/wp-content/uploads/museosans_100-webfont.woff') format('woff'), 
    url('/wp-content/uploads/museosans_100-webfont.ttf') format('truetype'), 
    url('/wp-content/uploads/museosans-100-webfont.svg#museo_sans_100regular')     format('svg');
}

【讨论】：

【解决方案6】：

我通过将 http 更改为 https 来修复我的问题（在 Safari 中也被破坏）（猜测谷歌自己改变了他们托管它的方式）。不知道为什么浏览器会关心样式表是来自 https 还是来自 http，但它确实解决了问题。

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

到

<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

【讨论】：