8

我用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（这是演示中使用的 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";
}
4

2 回答 2

7

此错误已在 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;
}

这应该确保您的所有图标在出现错误的情况下始终一致地呈现，并且将随着字体大小正确缩放。但在这一点上，最好将连字应避免使用非字母字符作为最佳实践。

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

于 2016-11-05T06:44:29.857 回答
2

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

{
    white-space : pre;
}

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

于 2017-07-07T08:53:56.950 回答