Question

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

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

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

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

适用于Chrome和Safari。

谢谢，

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

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

Answer 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;
}

Roboto字体在Firefox中不起作用

3 个答案: