@font-face css 代码错误。遗漏了什么答案

【问题标题】：@font-face css code bug. Missing something@font-face css 代码错误。遗漏了什么
【发布时间】：2013-03-12 17:26:13
【问题描述】：

我的 css 文件中有以下代码。字体在 Mac OS 上的所有浏览器中按需要呈现，但不会在 Windows 上呈现。现在在你说它不兼容 Windows 之前，我已经在 Windows 机器上创建了一个虚拟页面，它可以在 Chrome（不是 IE）中正常运行“.woff”文件。 Hover 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;

【问题讨论】：

请发一个真实的网址。相对 URL 可以指代任何东西。并请说明字体的来源和生成不同字体文件的工具。

标签： css fonts font-face webfonts font-family

【解决方案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 的修复、针对 Opera 的 woff 和针对移动设备的 svg。这种格式通常不会让我出错！

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

【讨论】：

好吧，我修好了。出于某种原因，Chrome v25 需要“skia.ttf.woff”文件，然后它可以读取它。 IE 仍然没有运气。
这有什么关系？这是关于使用一些不同的字体。
@JukkaK.Korpela 我几乎听不懂你在说什么。尾随修饰符永远不会导致清晰度。我用不同的字体来articulate一个点。