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

Question

我用icomoon创建了一个字体

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

所以我用的时候

<i>my-ligature</i>

它在Firefox和IE中可以正常工作,但不是Chrome.当我添加一个  或任何其他角色

<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 将此样式应用于您的演示页面并检查这两个i元素,您将看到第二个元素与第一个元素相比呈现为条子.如果您在每个文本之后添加文本,您将看到文本从不同的点开始.为了避免这种情况,您可以编写更多CSS,如下所示:

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

这应该确保尽管存在错误,所有图标都会一致地呈现,并且可以使用font-size正确缩放.但在这一点上,最好接受连字应该避免非字母字符的最佳实践.

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