@ font-face不工作 [英] @font-face doesn't work

问题描述

我下载了一个字体 inlove-light-wf.ttf ，以便使用规则 @ font-face

我在我的文件夹中有 home.html 和 inlove-在我的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; 
} 
  

但不起作用。

解决方案

问题的一个来源可能是，如果你的css在一个单独的文件，不在根文件夹中。例如，如果将所有css文件保存在css文件夹中，则需要将字体url修改为相对于该文件，而不是根文件夹。在这个例子中，它是 src：url（'../ inlove-light-wf.ttf'）;

此外，并不是所有的浏览器都可以使用.ttf字体文件。您必须在 @ font-face css中声明替代字体格式。

这是一个修改的 @ font-face 声明，让您开始使用。我还建议您阅读更多此处和这里。

  @ font-face {
 font-family：'Inlove'; 
 src：url（'inlove-light-wf.eot'）; / * IE9兼容模式* / 
 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'），/ * Android，iOS * / 
 url（'inlove-light-wf.svg＃svgFontName'）format（'svg'）; / *旧版iOS * / 
} 
  

I downloaded a font inlove-light-wf.ttf, in order to use the rule @font-face.

I have in my folder: home.html and inlove-light-wf.ttf.

In my CSS I have :

@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.

解决方案

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

Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the @font-face css.

Here's a modified @font-face declaration to get you started. I would also recommend reading more here and here.

@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 */
}

这篇关于@ font-face不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！