Roboto字体在css中不起作用
[英]roboto font not working in css
问题描述
I've CSS and XHTML files.
我有 CSS 和 XHTML 文件。 I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.我已经下载了所有 ROBOTO 字体并将其放在我的“webapps/fonts/”文件夹中。
In my XHTML i mentioned the CSS Path,在我的 XHTML 中，我提到了 CSS 路径，
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,并且我的 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;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "还在OutputText as styleClass="UX_FontClass "提到 XHTML OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser.即使字体在任何浏览器中都不起作用。 What i did wrong with my code?我的代码做错了什么？ OR Anything i missed out?或者我错过了什么？
5 个解决方案
解决方案1
5 2015-05-06 11:04:30
You should use google fonts, its really easy to use.你应该使用谷歌字体，它真的很容易使用。
https://www.google.com/fonts#UsePlace:use/Collection:Robot https://www.google.com/fonts#UsePlace:use/Collection:Robot
example例子
<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>
解决方案2
3 已采纳 2015-05-06 11:08:55
You are using custom font so you need to add a few font type format as well;您正在使用自定义字体，因此您还需要添加一些字体类型格式； like ttf , eot and svg for iphone, ipad devices.像ttf 、 eot和svg用于 iphone、ipad 设备。
Note: Some browsers supports different font type that's why you need
ttf,svgoreot.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;
}
Remember after that you need to add this code in class UX_FontClass记住之后你需要在UX_FontClass类中添加这段代码
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
解决方案3
0 2015-05-07 09:00:42
The error is in defining a font named roboto-bold in the @font-face clause, but trying to use a font named roboto-bolditalic later on.错误在于在@font-face 子句中定义了一个名为roboto-bold的字体，但稍后尝试使用一个名为roboto-bolditalic的字体。 That is not the same family!那不是同一个家庭！
Solution: make sure the names match.解决方案：确保名称匹配。
You probably meant你可能是说
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand或者，由于您也在定义大小，因此您可以使用font速记
font:italic 25px 'roboto-bold';
And there's no need for the !important .而且不需要!important 。
解决方案4
-1 2015-05-06 10:28:32
Why not use Google fonts?为什么不使用谷歌字体？
Place in the header of your html:放在 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'>
Use in your css:在你的 css 中使用：
font-family: 'Roboto', sans-serif;
解决方案5
-1 2015-05-06 11:19:41
its really easy to use in css.
它真的很容易在 css 中使用。@import url( http://fonts.googleapis.com/css?family=Roboto:700,400,500,300 );
@import url( http://fonts.googleapis.com/css?family=Roboto:700,400,500,300 );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.