Question

我正在尝试所有这些不同的方式：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <style type="text/css">
    @font-face {
        font-family: "cursivas";
        src: url(Freestyle.ttf) format("truetype");
    }
    @font-face {
        font-family: "tabs";
        src: url(FrutigerLTStd-Bold.otf) format("truetype");
    }
    @font-face {
        font-family: 'topMenuFont';
        src: url('frutigerltstd-bold-webfont.eot');
        src: url('frutigerltstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('frutigerltstd-bold-webfont.woff') format('woff'),
             url('frutigerltstd-bold-webfont.ttf') format('truetype'),
             url('frutigerltstd-bold-webfont.svg#FrutigerLTStd65Bold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    p.customfont { 
        font-family: "cursivas";

    }
    p.tabs{
        font-family:'tabs';color:#8e8e8e;
    }
    p.menu{
        font-family:'topMenuFont';
    }
    p{
    font-size:30px;
        color:#8e8e8e;
    }
    </style>
    </head>
    <body>

    <p class="customfont">FAMILIAS  <span style="color:blue">RESERVAS</span></p>
    <p class="tabs">FAMILIAS  <span style="color:blue">RESERVAS</span></p>
    <p class="menu">FAMILIAS <span style="color:blue">RESERVAS</span></p>
    <p>FAMILIAS <span style="color:blue">RESERVAS</span></p>
    </body>

</html>

路径没问题，因为它们都在FF中工作，

任何想法我错过了什么？

Answer 1

尝试here所述的语法：

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

从fontsquirrel.com获得链接，他们将其用于所有生成的字体。您还可以查看Google Web Font生成的css（它只显示您使用的浏览器的字体）

并将其加载到外部css文件中，这也可以解决一些问题。

Answer 2

如果我没记错的话，IE 7只支持带有@ font-face的EOT，而不支持TTF。

@ font-face在IE7中不起作用

2 个答案: