我正在设计一个博客,主要字体是Roboto,它来自于Google字体网站。
问题在于,在Firefox中,它无法正确渲染Roboto字体,而会使用Tahoma字体。
@font-face
{
font-family: Roboto-Regular;
}
@font-face
{
font-family: Roboto-Bold;
}
它在Chrome和Safari中表现很好。
谢谢,
我正在设计一个博客,主要字体是Roboto,它来自于Google字体网站。
问题在于,在Firefox中,它无法正确渲染Roboto字体,而会使用Tahoma字体。
@font-face
{
font-family: Roboto-Regular;
}
@font-face
{
font-family: Roboto-Bold;
}
它在Chrome和Safari中表现很好。
谢谢,
<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
。
我创建了一个快速页面,展示了三种字体: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>
在Firefox上,它显示Roboto。在火狐浏览器中,Roboto Condensed字体在匈牙利语中无法正常显示。
但在谷歌浏览器中,该字体完美地运行。
我尝试使用匈牙利语测试案例“á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;
}