HTML、CSS、JS Unicode字符互转

对于Unicode字符，HTML、CSS、JS的计算方式完全不一样，但可以相互转换。

1. HTML字符计算方式

对于Unicode，HTML采用十进制方式计算，并以”&#{unicode};”方式进行表示，例如对于“|”字符，HTML的表示方式如下：

<span>&#0124;</span>

需要特别注意的是，十进制必须至少4位数，也就是说如果不足4位，则“&#”后面补0，再强调一遍，千万不要省略0。

2. CSS字符计算方式

对于Unicode，CSS采用十六进行方式进行计算，并以“{unicode}”方式进行表示，同样以“|”字符为例，CSS的表示方式如下：

/* 这里并没有4个字符的要求，所以\007C并不是必须的 */
span:before {
    content : '\7C'
}

3. JS计算方式

对于Unicode，JS也采用十六进制的方式进行计算，但以“\u{unicode}”的方式表示，继续以“|”字符为例，JS的表示如下：

document.querySelector('span').innerHTML = '\u007C';

这里需要特别指出的是，对于innerHTML的赋值即可以采用”\u007C”方式，也可以采用”&#0124 ;”HTML方式，但对于input输入框，或者alert打印信息，只能采用”\u007C”方式。

4. 玩转font-awesome

通过上面的转换关系，现在我们就可以对font-awesome的字体进行任意的使用了，例如以HTML的方式，如下：

<svg width="100%" height="100%"> 
    <g transform="translate(100,100)">
      <text id="horizontalText" x="0" y="0" 
            fill="green"
            stroke="red"
            font-family="FontAwesome" 
            font-size="18">
            Sample Text &#61554;
      </text>
    </g>
</svg>

最后呈现的效果如下所示。