Question

我第一次尝试使用@ font-face，但它没有用，任何人都可以帮我解决这个问题为什么这个脚本不起作用

<style>
    @font-face{ 
        font-family: myfont;
        src: url('entypo.eot');
        src: url('entypo.eot?iefix') format('eot'),
             url('entypo.woff') format('woff'),
             url('entypo.ttf') format('truetype'),
             url('entypo.svg#helvetica') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    div {
        font-family: myfont;
    }
</style>

 </head>
 <body>
     <div>
          sdfdfdsfsdf
     </div>

Answer 1

试试这个

@font-face
{
    font-family: 'SegoeUI';
    src: url('Fonts/segoeui.eot');
    src: url('Fonts/segoeui.eot?#iefix') format('embedded-opentype'), url('fonts/segoeui.ttf') format('truetype');
}

@font-face
{
    font-family: 'SegoeLight';
    src: url('Fonts/segoeuil.eot');
    src: url('Fonts/segoeuil.eot?#iefix') format('embedded-opentype'), url('fonts/segoeuil.ttf') format('truetype');
}

Answer 2

我认为你的字体不是英文字体，对吗？无论如何。我经常遇到这个问题，因为我使用的是波斯字体，有时它们不起作用！我所做的是将它们重新转换为不同的字体格式，使用不同的软件，如在线字体转换器。有时候我的字体可以在IE浏览器中运行，而不是Chrome！然后我重新转换它们，一切都变为正常！所以重新转换它们可以解决你的问题。 PS：一些很酷的网站做这样的事情：
font face generator
font 2 web

Answer 3

将'添加到myfont，然后将helvetica更改为myfont，如下所示：

@font-face{ 
    font-family: 'myfont';
    src: url('entypo.eot');
    src: url('entypo.eot?iefix') format('eot'),
         url('entypo.woff') format('woff'),
         url('entypo.ttf') format('truetype'),
         url('entypo.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

div {
    font-family: 'myfont';
}

Answer 4

如果字体位于单独的文件夹中，则应将字体与CSS相关联

例如

// Directory Structure
images
css
fonts
-index.html

如果您的字体在文件夹中，而其他文件夹中的CSS则使用以下css

@font-face{ 
    font-family: 'myfont';
    src: url('../fonts/entypo.eot');
    src: url('../fonts/entypo.eot?iefix') format('eot'),
         url('../fonts/entypo.woff') format('woff'),
         url('../fonts/entypo.ttf') format('truetype'),
         url('../fonts/entypo.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

CSS @ font-face无效

4 个答案: