我有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字体，它非常易于使用。
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 设备。
注意：某些浏览器支持不同的字体类型，因此您需要添加
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; }
<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;
roboto-bold的字体，但后来尝试使用名为roboto-bolditalic的字体。这不是同一字体家族！font-family:'roboto-bold'; font-style:italic;
或者，既然你也在定义大小，你可以使用font缩写
font:italic 25px 'roboto-bold';
而且没有必要使用!important。
在 CSS 中使用非常容易。
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);