如何在CSS生成内容中嵌入Unicode补充私人使用字符？ [英] How to embed Unicode Supplementary Private Use characters in CSS generated content?

问题描述

我使用webfont作为图标。图标字形被映射到Unicode的补充私用区域A& B。

I'm using a webfont for icons. The icon glyphs are mapped to Unicode's Supplementary Private Use Area-A & B.

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

Everything works fine if I pass characters into CSS via data-* attributes:

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

然后：

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

将转义字符直接嵌入CSS ...

But if I try to embed the escaped character directly in CSS...

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

显示为缺少的符号问号。

It shows up as a missing symbol question mark.

但是如果我尝试不同的特殊字符...

But if I try a different special character...

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

运作正常！

我在规格中找不到任何东西，说这是不可能的...它似乎不工作。

I can't find anything in the spec that says this isn't possible... It just doesn't seem to work.

任何人都有任何洞察到这个？

Anybody have any insight into this?

推荐答案

访问Icomoon将您的图标字体映射到私人使用区域。当你下载字体时，keyamoon已经提供了html，它有两种显示特殊字符的方法。

Visit Icomoon to map your icon font to Private Use Area. When you download the font, keyamoon has provided html, which has two methods for displaying the special characters.

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

Method 1 (from CSS-tricks) and included in Icomoon download:

<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中重新定义。我只是喜欢我的图标。

You can use any tag for the html really; I agree with one of the comments in CSS-tricks that the italic tag may be best semantically, since it was redefined in html5. I just like i for icon.

这篇关于如何在CSS生成内容中嵌入Unicode补充私人使用字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！