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

Question

创建了一个字体

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

所以当我使用

<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;
}

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

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

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

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

弥补的缺失字符间距

Answer 2

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

{
    white-space : pre;
}

确实解决了这个问题。 Mozilla 54.0.1 运行良好。

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

Ligatures in Chrome: Only displaying when adding other characters

css

fonts

google-chrome

ligature