CSS @font-face 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12589758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face doesn't work
提问by rayashi
I downloaded a font inlove-light-wf.ttf, in order to use the rule @font-face.
我下载了一个字体inlove-light-wf.ttf，为了使用规则@font-face。
I have in my folder: home.htmland inlove-light-wf.ttf.
我的文件夹中有：home.html和inlove-light-wf.ttf。
In my CSS I have :
在我的 CSS 中，我有：
@font-face {
font-family: 'Inlove';
src: url('inlove-light-wf.ttf');
font-weight: normal;
font-style: normal;
}
#definicao{
text-align:center;
color:#0080C0;
font-family:'Inlove';
font-size:24px;
margin-top:20px;
border-top:solid #999 thin;
padding: 20px 40px 3px 40px;
height:290px;
background-color:#EFEFEF;
}
#definicao{
text-align:center;
color:#0080C0;
font-family:'Inlove';
font-size:24px;
margin-top:20px;
border-top:solid #999 thin;
padding: 20px 40px 3px 40px;
height:290px;
background-color:#EFEFEF;
}
But it doesn't work.
但它不起作用。
回答by Alex Schimp
One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url('../inlove-light-wf.ttf');
问题的一个来源可能是您的 css 位于不在根文件夹中的单独文件中。例如，如果您将所有 css 文件保存在“css”文件夹中，则需要将字体 url 修改为相对于该文件，而不是根文件夹。在这个例子中，它将是src: url('../inlove-light-wf.ttf');
Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the @font-facecss.
此外，并非所有浏览器都可以使用 .ttf 字体文件。您必须在@font-facecss 中声明替代字体格式。
Here's a modified @font-facedeclaration to get you started. I would also recommend reading more hereand here.
这是一个修改后的@font-face声明，可以帮助您入门。我还建议在这里和这里阅读更多内容。
@font-face {
font-family: 'Inlove';
src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */
src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */
url('inlove-light-wf.ttf') format('truetype'), /* Safari, Android, iOS */
url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */
}
回答by Matej Pí?a
回答by cmitja
I had problems with font too. When font was working in IE wasn't on iPhone and when was working on iPhone wasn't in IE. Here is my code (i don't know why it works this way, but it does for me):
我也有字体问题。当字体在 IE 中工作时不在 iPhone 上，当在 iPhone 上工作时不在 IE 中。这是我的代码（我不知道它为什么这样工作，但它对我有用）：
@font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyaChicken.eot);
src: url(../gradivo/font/RoyalChicken.ttf) format("truetype"), /* Safari, Android, iOS */
url(../gradivo/font/RoyalChicken.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */
url(../gradivo/font/RoyalChicken.woff) format("woff"), /* Pretty Modern Browsers */
url(../gradivo/font/RoyalChicken.svg#RoyalChicken) format("svg");
}
@font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyaChicken.eot);
}
@font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyalChicken.ttf) format("truetype");
}It may help you. :)
它可能会帮助你。:)
