@ font-face自定义字体的麻烦

时间:2014-07-15 12:22:56

标签: html css fonts

嘿所以我在前面问了一个小问题,但没有得到任何地方,所以我觉得发布代码的整个快照是个好主意,因为我是新手。无论如何,我想知道是否有人能说出我在这里做错了什么。我正在为项目使用自定义字体,但它似乎只在chrome中呈现。我尝试过使用@fontface结构,但它仍然无效。任何帮助将非常感谢!

<!DOCTYPE html >

<html lang="en">
<head>
<title>Fire House Home</title>
    <style type="text/css">
    <!--
    @font-face {
         font-family: 'Didot HTF';
         src: url('DidotHTF.eot?') format('eot'),
              url('DidotHTF.woff') format('woff'),
              url('DidotHTF.ttf')  format('truetype'),
              url('DidotHTF.svg#DidotHTF') format('svg');
    }    
    #p1{
        position:relative;
        font-family: "Didot HTF";
        font-size:120%;
        top: 300px;
        text-align:center;
        white-space: nowrap;
    }



    -->  

    </style>

</head>

<body>

<div id="p1">
    Content, storytelling and strategy for the multi-screen, multi-channel age 
</div>




</body>
</html>

1 个答案:

答案 0 :(得分:0)

所以你看到需要生成项目文件夹字体和@ font-face的web字体web font generator以指定字体的路径 像这样

@font-face {
    font-family: 'SegoePrint';
    src: url('../fonts/SegoePrint.eot?') format('eot'),
         url('../fonts/SegoePrint.woff') format('woff'),
         url('../fonts/SegoePrint.ttf')  format('truetype'),
         url('../fonts/SegoePrint.svg#SegoePrint') format('svg');
}