Chrome连接:仅在添加其他字符时显示

Question

我用二十色创建了一个字体

我想用结扎器。目前我所有的结扎都有连字符。例如:我的结扎

​

​

所以当我用

<i>my-ligature</i>

在Firefox和IE中，它的工作原理与预期一样，但Chrome则不然。当我添加一个或任何其他字符，例如

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

它也适用于Chrome。

当我将连接代码中的连字符替换为类似下划线之类的东西时，它就会像预期的那样在Chrome中工作(没有必要的空格等)。

这是Chrome Bug还是连字符在这里不允许的？

您可以在这里找到整个过程的演示(用标准的图标制作) 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

这个缺陷已经在铬的其他地方被发现，并且更具体地影响用非字母字符命名的连接：

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

它被标记在线程上，但情况似乎并非如此。

我的直觉是，通过调整字母间距，我检查了角色是否在那里，但看不出来，这起作用了。以下可忽略不计的内容将允许图标呈现：

i {
    letter-spacing: .001em;
}

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

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

这应确保您的所有图标呈现一致，尽管有错误，并将适当地与字体大小。但在这一点上，最好接受的最佳做法是，连接应该避免非字母字符。

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

Answer 2

当我们在59.0中创建自己的图标时，我们在角4中也有同样的问题。使用css属性

{
    white-space : pre;
}

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