Question

这是我的CSS代码：

字体不起作用。我错过了什么吗？

我想提一下，它没有安装在本地操作系统上，而且我确信网址完全符合字体

@font-face {
    font-family: 'ma';
    src: url('http://localhost/header/images/FS_Old.ttf');
}

.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

Answer 1

瑞安是对的。我用一个工作的URL替换了你的URL，它工作得非常好。这是我用的。

    @font-face {
    font-family: 'ma';
    src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}


.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

Answer 2

这可能是因为Chrome，Firefox，IE不支持ttf扩展名。您可以尝试使用其他扩展程序：

@font-face {
   font-family: 'ma';
   src: url('FS_Old.eot'); /* IE9 Compat Modes */
   src: url('FS_Old.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('FS_Old.ttf.woff') format('woff'), /* Modern Browsers */
        url('FS_Old.ttf.ttf')  format('truetype'), /* Safari, Android, iOS */
}

Answer 3

我使用此网站将字体转换为其他类型http://www.fontsquirrel.com/tools/webfont-generator并使用了不同的支持字体类型，这似乎解决了问题。以下是适用于所有浏览器的新代码。

<html>
<head>
<style>


    @font-face {
    font-family: 'baroque_scriptregular';
    src: url('baroquescript.eot');
    src: url('baroquescript.eot?#iefix') format('embedded-opentype'),
         url('baroquescript.woff') format('woff'),
         url('baroquescript.ttf') format('truetype'),
         url('baroquescript.svg#baroque_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

    .menu_head {
        width: 100%;
        position: relative;
        height: 30px;
        font-family: baroque_scriptregular;
    }
</style>
</head>
<body>
<div class="menu_head" >

    hellod
    </div>
</body>

@ font-face无法在Chrome，Firefox，IE上运行

3 个答案: