Chrome中的连结：仅在添加其他字符时显示

Question

我创建了一个icomoon

的字体

我想使用连字。目前我的所有连字都在连字码中有连字符。 例如：my-ligature

所以当我使用

时

<i>my-ligature</i>

它在Firefox和IE中正常运行，但不是Chrome。 当我添加一个＆amp; nbsp;或任何其他字符，如

<i>my-ligature&nbsp;</i>
<i>my-ligature </li>

它也适用于Chrome。

只要我将连字码中的连字符替换为其他类似下划线的连字符，就可以按预期在Chrome中使用（无需空白等）

这是Chrome Bug还是这里不允许使用连字符？

你会在这里找到整个事物的演示（用标准的icomoon图标制作） http://www.swisscocktailblog.ch/icomoon/demo.html

编辑： 根据要求提供连字的css（这是演示中使用的）

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?6mfq3a');
    src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6mfq3a') format('truetype'),
    url('fonts/icomoon.woff?6mfq3a') format('woff'),
    url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i, .icomoon-liga {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-wifi-full:before {
    content: "\e600";
}

Answer 1

此错误已在Chromium的其他位置识别，更具体地说是以非字母字符命名的连字：

https://bugs.chromium.org/p/chromium/issues/detail?id=277677

在该主题上标记为固定，但似乎并非如此。

在预感中，我检查了角色是否在那里，但通过调整字母间距不可见，这是有效的。如下所示可以忽略不计的内容将允许图标呈现：

i {
    letter-spacing: .001em;
}

如果您通过devtools将此样式应用于demo页面并检查两个i元素，您会看到第二个呈现为与第一个相比较的条子。如果您在每个文本之后添加文本，您将看到文本从不同的点开始。为了避免这种情况，您可以编写更多CSS，如下所示：

i {
    display: inline-block;
    letter-spacing: .001em;
    width: 1.2em;
}

这应确保您的所有图标尽管存在错误而一致地呈现，并且将使用font-size正确缩放。但在这一点上，最好接受连字应避免使用非字母字符的最佳做法。

虽然虫子的原因仍不清楚，但上述内容应提供可行的解决方案。附加字符允许图标渲染的原因是它们通过附加CSS提供了缺少的字符间距。

Answer 2

在chrome 59.0中创建我们自己的图标时，我们在Angular 4中也遇到了同样的问题。使用css属性

{
    white-space : pre;
}

解决了这个问题。 Mozilla 54.0.1工作正常。