@font-face 不起作用

Question

我下载了一个字体文件 inlove-light-wf.ttf，目的是为了使用规则 @font-face。

我的文件夹里有：home.html 和 inlove-light-wf.ttf。

在我的 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;
}

但它没有起作用。

- rayashi

---

你尝试过在 #definicao 规则中设置 font-weight 和 font-style 属性为 'normal' 吗？ - Maz

CSS是在与HTML不同的文件中定义的，还是内联在home.html文件中？ - kaveman

除了通常需要正确的CSS路径指向你的TTF文件之外，你还需要确保你的服务器实际上已经设置好了提供TTF文件的服务。 - lucuma

Answer 1

问题的一个来源可能是您的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 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 */
}

- Spectre87

Answer 2

我也遇到了字体的问题。当字体在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");
}

它可能会对你有所帮助。 :)

- cmitja

Answer 3

@font-face规则通常不支持一些旧浏览器。我通常使用font-face生成器，它将从您需要包含的字体生成CSS文件，并且所有浏览器都会正确显示。

- Matej Píša