字体图标原理

字符实体

<p> 小于号 &#60; </p>
<p> 大于号  &#62; </p>

字符实体应该知道吧，想了解的百度......

实体编号和Unicode编码

<p>&#49</p>
<p>1</p>

是不是感觉和字符实体的写法一样？现在知道实体编号和Unicode编码的关系吧？
我们知道了一些特殊的字符可以直接使用Unicode编码来代替，那普通的字可以吗？
肯定可以的

页面显示
1
1
在线Unicode编码转换

Unicode编码书写的位置和方法

html实例:

<p>&#49</p>
<p>&#x31</p>
<p>1</p>

&#49// 十进制写法
&#x31// 十六进制写法 31转成十进制是49
页面显示
1
1
1

css实例:

html代码:

<p class="box"></p>

css代码:

.box:before{
content: '\0061';
}

页面显示
a

js实例:

html代码:

<p id="p"></p>

js代码:

var op = document.getElementById('p');
        op.innerHTML ='\u0031';//输出1  Unicode
//        op.innerHTML ='&#49';//输出1 十进制
//        op.innerHTML ='&#x31';//输出1 十六进制

字体图标和字体的关系

html代码:

<p class="box">我喜欢你</p>
<p>我喜欢你</p>

css代码:

@font-face {
    font-family: '木舟中黑字体改版';
    src: url('../fonts/木舟中黑字体改版.ttf')  format('truetype')
}
.box{
    font-family: "木舟中黑字体改版" ;
}

页面显示:

看懂了就什么都懂了

如果你能想通其中怎样实现的说明你懂了也懂字体图标的实现

我编辑改变了原来的字体库，把“我”改成了“干” 喜 ->你 ，欢->妈 ，你->的，操作视图 如下其中字体库相当于这里的”木舟中黑字体改版“字体，

1

图片2

1

字体图标就是自定义的字体，这个字体你可以是任何图形，你要明白这里的字体也是图形

用到了一个字体编辑工具fontcreatorhanhua

这是打开木舟中黑字体改版字体的界面,

字体界面
字体图标的demo的资料链接：http://pan.baidu.com/s/1i51RLZ3 密码：t8bh