Roboto 字体在 Firefox 中不起作用答案

【问题标题】：Roboto font doesn't work in FirefoxRoboto 字体在 Firefox 中不起作用
【发布时间】：2015-04-02 15:44:12
【问题描述】：

我正在设计一个博客，主要字体是 Roboto，它来自 Google 字体网站。

问题是它在 Firefox 中没有正确呈现，而不是使用 Roboto 字体，Firefox 使用 Tahoma。

@font-face
{
    font-family: Roboto-Regular;
}

@font-face
{
    font-family: Roboto-Bold;
}

它在 Chrome 和 Safari 中运行良好。

谢谢，

【问题讨论】：

CSS 不是您声明字体或在元素上指定字体系列的方式。它应该是什么？
如果您正确嵌入字体，Firefox 将正确显示它。
这取决于您如何使用 Roboto 字体。您需要额外的代码才能引用 Robot-Regular 字体...如果您使用的是文件的 .eot 版本，它在 FF 中将不起作用。
@AlexanderO'Mara 例如，我有一个
标签，并且字体被应用到它上面。它在 Chrome 和 Safar 中运行良好，但在 FireFox 中它呈现 Tahoma
您发布的代码不应该做任何事情。它甚至可能破坏 Google 字体样式表中的代码。

标签： css font-face webfonts

【解决方案1】：

要在常规和粗体版本中使用 Roboto，请使用它在页面中包含样式表：

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

然后使用字体系列名称Roboto 并使用font-weight 样式设置粗细。

您可以像这样设置它们，并始终使用备用字体：

font-family: Roboto, sans-serif;
font-weight: normal;

font-family: Roboto, sans-serif;
font-weight: bold;

除了字体粗细名称normal 和bold，您还可以分别使用特定粗细数字400 和700。

【讨论】：

【解决方案2】：

我创建了一个快速页面，其中显示了 3 种字体，Roboto、Tahoma 和默认字体：

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
    <body>
    <p class="roboto">The quick brown fox jumps over the lazy dog</p>
    <p class="tahoma">The quick brown fox jumps over the lazy dog</p>
    <p>The quick brown fox jumps over the lazy dog</p>
  </body>
</html>

http://codepen.io/anon/pen/bptvC

在 Firefox 上它显示 Roboto。

【讨论】：

【解决方案3】：

Roboto Condensed 字体在匈牙利语的 Firefox 中被破坏。在 Chrome 中它可以完美运行。

我使用匈牙利语测试用例“árvíztűrő tükörfúrógép”尝试了该字体。此字符串包含匈牙利语中的所有特殊字符。

损坏的字符是'ű'和'ő'。

这是 HTML 代码：

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,regular,700' rel='stylesheet' type='text/css'>
  </head>
    <body>
    <p class="roboto">ÁRVÍZTŰRŐ TÜKÖRFÚRÓGÉP<br>árvíztűrő tükörfúrógép</p>
    <p>ÁRVÍZTŰRŐ TÜKÖRFÚRÓGÉP<br>árvíztűrő tükörfúrógép</p>
  </body>
</html>

这是应用的 CSS：

.roboto {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}

【讨论】：

标签，并且字体被应用到它上面。它在 Chrome 和 Safar 中运行良好，但在 FireFox 中它呈现 Tahoma