Question

我是CSS和XHTML文件。我已经下载了所有ROBOTO字体并将其放入我的＆＃34; webapps / fonts /＆＃34;文件夹中。

在我的XHTML中，我提到了CSS Path，

'<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

您正在使用自定义字体，因此您还需要添加一些字体类型格式;对于iphone，ipad设备，例如ttf，eot和svg。

注意：某些浏览器支持不同的字体类型，这就是您需要的原因 ttf，svg或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;
}

请注意，您需要在课程UX_FontClass

中添加此代码

.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }

Answer 2

你应该使用谷歌字体，它真的很容易使用。

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

为什么不使用Google字体？

放在你的html标题中：

<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 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简写

font:italic 25px 'roboto-bold';

并且不需要!important。

roboto字体在css中不起作用

5 个答案: