4

我在我的网站上使用谷歌网络字体Titillium 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 看起来更好吗？

4

6 回答 6

2

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

font-weight: 200;
于 2013-04-16T08:13:58.503 回答
1

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

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

  1. 转到关于：配置
  2. 找到 gfx.direct2d.force-enabled
  3. 设置为 True 并重新启动 Firefox
于 2016-01-30T21:03:22.083 回答
0

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

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

在做了一些调查之后，这就是我发现的：

  • 我似乎一般都有 cleartype 的问题，因为当我查看启用 cleartype 的细字体（通过控制面板>字体）时，它们看起来非常像素化。关闭 cleartype 后，它们看起来更平滑，但没有出色的亚像素渲染，因此它们不像它们应该的那样超级清晰。

  • 我电脑上安装的每个浏览器（IE、Opera、Chrome、Firefox）对细字体的处理方式都不同。Opera 具有与 Firefox 类似的像素化功能。Chrome 可以很好地处理 Titillium，但不能处理 Glypha LT（The Expressive Web上的标题字体）。具有讽刺意味的是，IE 是唯一能完美处理所有细字体的浏览器。

于 2013-08-21T09:06:58.527 回答
0

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

于 2013-04-16T08:13:57.947 回答
0

显然，默认情况下 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');
}
于 2014-01-22T00:30:41.597 回答
0

我通过将 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'>
于 2017-03-02T01:34:10.277 回答