roboto 字体在 css 中不工作

Question

我有 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

即使字体在任何浏览器中都不起作用。我的代码做错了什么？或者我错过了什么？

Answer 1

为什么不使用 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;

Answer 2

你应该用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>

Answer 3

您使用的是自定义字体，因此您还需要添加一些字体类型格式；例如 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; }

Answer 4

它在 css 中非常容易使用。

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);

Answer 5

错误是在@font-face 子句中定义了名为roboto-bold 的字体，但稍后尝试使用名为roboto-bolditalic 的字体。那不是一家人！

解决方案：确保名称匹配。
你可能是说

font-family:'roboto-bold'; font-style:italic;

或者，由于您也在定义大小，因此您可以使用 font shorthand

font:italic 25px 'roboto-bold';

并且不需要 !important。

roboto 字体在 css 中不工作

roboto font not working in css

css

xhtml

font-face

webfonts

google-webfonts