html - IE10 中的 Kudakurage 连字字体

Question

我一直在尝试在我的网站上使用 Kudakurage Ligature 字体。它适用于所有“现代浏览器”，但出于某种原因，它似乎不适用于 IE10。

如果我用一些元素创建一个单独的 html 文件来测试字体，它工作得很好!

我使用的代码完全相同，并且我使用了调试工具来确保没有任何 CSS 规则被覆盖。

真的很想在这个问题上得到一些帮助。我不想再次使用在我的网站上使用图片的老把戏:(

使用的代码:HTML:

<div onclick="refresh();" class="lsf">refresh</div>

CSS:

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

.lsf {
    font-family: 'LigatureSymbols' !important;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-font-feature-settings: "liga" 1, "dlig" 1;
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    -o-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}

Kudakurage Ligature 字体可在以下位置获得:http://kudakurage.com/ligature_symbols/

Answer 1

你能在 http://kudakurage.com/ligature_symbols/ 上看到带有 IE10 的图标吗？ ？是的？我是这么想的。我很高兴你的浏览器没有问题。 ;)

可能还有其他一些问题。大多数情况下，它归结为:

1. 字体文件不在您所说的位置。
2. 其他 CSS 问题。

我创建了一个示例:http://jsfiddle.net/allcaps/7FL6C/2/它显示了一个工作示例和失败的“FAIL NO FONT 场景”。

/* FAIL NO FONT scenario */
@font-face {
    font-family: 'LigatureSymbols_1';
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot');
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('there/is/no/font/here/LigatureSymbols-2.11.woff') format('woff'),
         url('there/is/no/font/here/LigatureSymbols-2.11.ttf') format('truetype'),
         url('there/is/no/font/here/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('there/is/no/font/here/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

在调试器中你得到一个 404:

您问题的答案是确保字体加载。