Question

我在我的网站上使用谷歌网络字体 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中让这个看起来更好的任何解决方法吗？

Answer 1

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

font-weight: 200;

Answer 2

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

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

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

Answer 3

我最终看起来很好，尝试清除浏览器缓存，然后重试。

Answer 4

我有完全相同的问题！我正在使用最新版本的Firefox（23）和Windows（8）。我的笔记本电脑中也有一块谨慎的（板载）AMD显卡，相当弱。

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

经过一些调查，这是我发现的：

我似乎一般都有cleartype的问题，因为当我查看带有cleartype的瘦字体（通过控制面板＆gt;字体）时，它们看起来非常像素化。关闭cleartype，它们看起来更平滑，但没有伟大的子像素渲染，所以它们不像它们那样超级锐利。
我的计算机上安装的每个浏览器（IE，Opera，Chrome，Firefox）都以不同的方式处理精简字体。 Opera具有与Firefox相似的像素化。 Chrome对Titillium很好，但不对待Glypha LT（The Expressive Web上的标题字体）。具有讽刺意味的是，IE是唯一能够完美处理所有瘦字体的浏览器。

Answer 5

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

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

此外，请尝试检查Firefox的内置开发者控制台（菜单＆gt; Web Developer＆gt; 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');
}

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

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

6 个答案: