0

我一直在尝试在我的网站上使用 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/

4

1 回答 1

0

你能在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：

404

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

于 2014-02-17T12:42:47.213 回答