roboto 字体在 css 中不工作
roboto font not working in css
我有 CSS 和 XHTML 文件。我已经下载了所有 ROBOTO 字体并将其放在我的 "webapps/fonts/" 文件夹中。
在我的 XHTML 中,我提到了 CSS 路径,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
和我的 CSS 文件有这样的样式,
@font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') @ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
还在 OutputText as styleClass="UX_FontClass "
中提到了 XHTML
即使字体在任何浏览器中都不起作用。我的代码做错了什么?或者我错过了什么?
为什么不使用 Google 字体?
放置在您的 html 的 header 中:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
在您的 css 中使用:
font-family: 'Roboto', sans-serif;
你应该用google字体,真的很好用。
https://www.google.com/fonts#UsePlace:use/Collection:Robot
例子
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
您使用的是自定义字体,因此您还需要添加一些字体类型格式;例如 ttf
、eot
和 svg
用于 iphone、ipad 设备。
Note: Some browsers supports different font type that's why you need
ttf
,svg
or eot
.
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
记住之后你需要在class UX_FontClass
中添加这段代码
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
它在 css 中非常容易使用。
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
错误是在@font-face 子句中定义了名为roboto-bold
的字体,但稍后尝试使用名为roboto-bolditalic
的字体。那不是一家人!
解决方案:确保名称匹配。
你可能是说
font-family:'roboto-bold'; font-style:italic;
或者,由于您也在定义大小,因此您可以使用 font
shorthand
font:italic 25px 'roboto-bold';
并且不需要 !important
。
我有 CSS 和 XHTML 文件。我已经下载了所有 ROBOTO 字体并将其放在我的 "webapps/fonts/" 文件夹中。
在我的 XHTML 中,我提到了 CSS 路径,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
和我的 CSS 文件有这样的样式,
@font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') @ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
还在 OutputText as styleClass="UX_FontClass "
即使字体在任何浏览器中都不起作用。我的代码做错了什么?或者我错过了什么?
为什么不使用 Google 字体?
放置在您的 html 的 header 中:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
在您的 css 中使用:
font-family: 'Roboto', sans-serif;
你应该用google字体,真的很好用。
https://www.google.com/fonts#UsePlace:use/Collection:Robot
例子
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
您使用的是自定义字体,因此您还需要添加一些字体类型格式;例如 ttf
、eot
和 svg
用于 iphone、ipad 设备。
Note: Some browsers supports different font type that's why you need
ttf
,svg
oreot
.
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
记住之后你需要在class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
它在 css 中非常容易使用。
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
错误是在@font-face 子句中定义了名为roboto-bold
的字体,但稍后尝试使用名为roboto-bolditalic
的字体。那不是一家人!
解决方案:确保名称匹配。
你可能是说
font-family:'roboto-bold'; font-style:italic;
或者,由于您也在定义大小,因此您可以使用 font
shorthand
font:italic 25px 'roboto-bold';
并且不需要 !important
。