谷歌字体在火狐浏览器中无法正确渲染

Question

我在我的网站上使用谷歌网络字体Ttitillium Web。它在Google Chrome、IE、Opera和Safari中渲染得很好，但在Firefox中文本看起来很糟糕。

谷歌字体链接：

<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中显示效果不佳的问题？

- nsilva

---

我明白你在说什么。基本上，字体在这个浏览器中看起来没有其他浏览器那么平滑。不幸的是，你无法解决这个问题。这是因为不同的浏览器渲染字体的方式以及它们所使用的字体文件不同造成的。 - tw16

Answer 1

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

font-weight: 200;

- Mike

Answer 2

我在使用所有Google网络字体（特别是Roboto）时遇到了问题，发现需要强制启用Direct2d加速才能解决。我的显卡是Intel HD4000。

以下是对我有用的解决方案，如果对您或其他读者有用，请参考：

1. 进入about:config页面 2. 找到gfx.direct2d.force-enabled选项 3. 将其设置为True并重新启动Firefox

- Aidan

Answer 3

在我的端看起来没问题，请尝试清除浏览器缓存，然后再试一次。

- shabeer90

Answer 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是唯一一个完美处理所有细字体的浏览器。

- Dane Rossenrode

Answer 5

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

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

此外，尝试在Firefox内置的开发者控制台中检查（菜单>Web Developer>Web Console），查找加载字体时出现的错误（Firebug似乎不报告这些错误）。这将有助于您确定问题所在。

要解决问题，您可以配置您的站点来接受外部字体，例如：

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

对于其他字体（即不来自谷歌的字体），如果您可以在服务器上托管字体，您也可以相对引用它们以解决问题。例如：

@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');
}

- Matty J

Answer 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'>

- rogerdpack