css - Chrome 中的连字 : Only displaying when adding other characters

Question

我用 icomoon 创建了一个字体

我想使用连字。目前我所有的连字在连字代码中都有连字符。例如:我的连字

所以当我使用

<i>my-ligature</i>

它在 Firefox 和 IE 中按预期工作，但在 Chrome 中不工作。当我添加  或任何其他字符，例如

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

它也适用于 Chrome。

一旦我将连字代码中的连字符替换为下划线之类的其他内容，它就会按预期在 Chrome 中运行(不需要空格等)

这是 Chrome 错误还是此处不允许使用连字符？

你会在这里找到整个东西的演示(用标准的 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;
}

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

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

尽管存在错误，这应该确保您的所有图标呈现一致，并且会随着字体大小正确缩放。但在这一点上，最好接受连字应避免使用非字母字符作为最佳实践。

虽然错误的原因还不清楚，但上面应该提供了一个可行的解决方案。附加字符允许图标呈现的原因是它们提供了由附加 CSS 弥补的缺失字符间距。