@font-face 不起作用答案

【问题标题】：@font-face doesn't work@font-face 不起作用
【发布时间】：2015-06-24 05:58:24
【问题描述】：

我下载了一个字体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;
}

但它不起作用。

【问题讨论】：

您是否尝试将 #definicao 规则中的 font-weight 和 font-style 属性设置为“正常”？
是在与 HTML 不同的文件中定义的 CSS 还是 home.html 内的内联？
除了通常是正确的 ttf 文件的 css 路径外，您需要确保您的服务器实际设置为提供 ttf 文件。

标签： css font-face

【解决方案1】：

问题的一个来源可能是您的 css 位于一个不在根文件夹中的单独文件中。例如，如果您将所有 css 文件保存在“css”文件夹中，则需要将字体 url 修改为相对于该文件，而不是根文件夹。在本例中为src: url('../inlove-light-wf.ttf');

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

这是一个修改后的@font-face 声明，可帮助您入门。我还建议阅读更多 here 和 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 */
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

它可以帮助你。 :)

【讨论】：