@ font-face自定义字体的麻烦 [英] @font-face troubles with custom font

查看:182
本文介绍了@ font-face自定义字体的麻烦的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嘿,所以我问了一个问题,这个小b之前,但没有得到任何地方,所以我,虽然这是一个好主意,发布的代码,因为我是新的这一切。无论如何,我想知道是否有人可以告诉我在这里做错了。我使用自定义字体为项目,但它只是似乎在chrome中呈现。我试过使用@fontface结构,但它仍然不工作。任何帮助将非常感谢!

Hey so I asked a question to this a little b it ago but didn't get anywhere so I though it would be a good idea to post the whole snap of the code since I'm new to this. Anyway, I was wondering if anyone can tell what I'm doing wrong here. I'm using a custom font for a project but it only seems to render in chrome. I've tried using the @fontface structure but its still not working. Any help will be extremely appreciated!

<!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>


推荐答案

,所以你看到需要生成web字体< a href =http://www.web-font-generator.com/ =nofollow> web字体生成器放入项目文件夹字体和@ font-face以指定字体的路径
like this

and so you see the need to generate web font web font generator put in projects folder fonts and @ font-face to specify the path to the font like this

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

这篇关于@ font-face自定义字体的麻烦的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆