Question

我的css文件中有以下代码。字体在Mac OS上的所有浏览器中根据需要呈现，但不会在Windows上呈现。现在在你说它不兼容Windows之前，我已经在Windows机器上创建了一个虚拟页面，它在Chrome（而不是IE）中运行'.woff'文件。 Hovever IE可以渲染this page。我觉得我错过了@ font-face中重要的东西。这是我的代码：

@font-face { font-family: Skia; 
        src:url('./webfonts/skia.ttf') format('truetype'),
            url('./webfonts/skia.eot') format('embedded-opentype'),
            url('./webfonts/skia.woff') format('woff'),
            url('./webfonts/skia.svg');
        font-weight: lighter;
        font-style: normal;
    }

'webfonts'文件夹与css文件所在的'styles'文件夹位于同一目录中。

>styles
    >'style.css'
>webfonts
    >'skia.ttf / woff / eot / svg'

在<body>标记中，我包含font-family:Skia, sans-serif;

Answer 1

看起来你走在正确的轨道上

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

您确实希望包含格式，即修复旧版本的ie，woff for opera和svg for mobile devices。这种格式通常不会让我错！

此外，您可以安全地省略./，因为它与当前目录有关。您还应该包含font-weight和font-style。 Checkout how google webfonts does this.

@ font-face css代码bug。遗漏了什么

1 个答案: