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;
}

但它不起作用。

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

Answer 2

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

Answer 3

我也遇到过字体问题。当IE中的字体工作不在iPhone上时，在iPhone上工作的时间并非如此。这是我的代码（我不知道它为什么会这样，但它对我有用）：

＆＃13;

@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");
}

＆＃13;

它可能对你有所帮助。：）

@ font-face不起作用

3 个答案: