如何在CSS生成的内容中嵌入Unicode补充专用字符？

Question

我正在使用一个Web字体来展示图标。这些图标的字形映射到Unicode的补充专用区域-A和B。

如果我通过data-*属性将字符传递到CSS，一切都很正常：

<div class="icon" data-icon="&#xF005A;"></div>

接下来：

.icon::before {
    font-family: IconFont;
    content: attr(data-icon)
}

但是如果我直接在CSS中嵌入转义字符...

.icon::before {
    font-family: IconFont;
    content: '\0F005A ';
}

它会显示为一个缺失的符号问号。但是，如果我尝试使用不同的特殊字符...

.icon::before {
    font-family: IconFont;
    content: '\F8FF ';
}

运行良好！

我在规格中找不到任何关于这不可能的说明……它只是似乎无法正常工作。

有人对此有什么见解吗？

- Adam Biggs

---

我遇到了同样的问题，但这个问题只在webkit浏览器中出现。在IE和Firefox中它运行良好。但在Chrome、Safari或Mobile Safari中无法工作。 - Michael Christensen

虽然这不是一个真正的解决方案，但我通过将一些有用的字符映射到它们的“常规”字符代码来做出了妥协。对于像后退/前进箭头、勾号等已经有相关Unicode字符的字符，这应该是可以接受的。我相信屏幕阅读器可能会朗读字符名称，比如“勾号”（未经测试），但我可以接受这个。 - Adam Biggs

我们通过使用以“\F000”开头的范围来解决了这个问题。至少在WebKit解决此问题或我们找到另一个解决方案之前，该范围似乎对屏幕阅读器没有问题，但我尚未在en-US语言之外进行测试。 - Michael Christensen

Answer 1

访问Icomoon将您的图标字体映射到专用区域。下载字体时，Keyamoon提供了包含两种方法显示特殊字符的html。

方法1（来自CSS-tricks）已包含在Icomoon下载中：

<i aria-hidden="true" data-icon="&#xe000;"></i>

 ......

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

方法2 来自Icomoon：

 <span aria-hidden="true" class="icon-pencil"></span>

 ......

.icon-pencil, .icon-folder {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-pencil:before {
    content: "\e000";
}
.icon-folder:before {
    content: "\e001";
}

您可以使用任何HTML标签，我同意CSS-tricks中的一条评论，认为斜体标签可能在语义上最好，因为它在HTML5中被重新定义。但我只是喜欢将其用于图标。

- Jen