html 字体图标工作原理,字体图标原理

字体图标原理

字符实体

小于号 <

大于号 >

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

实体编号和Unicode编码

1

1

是不是感觉和字符实体的写法一样？现在知道实体编号和Unicode编码的关系吧？

我们知道了一些特殊的字符可以直接使用Unicode编码来代替，那普通的字可以吗？

肯定可以的

Unicode编码书写的位置和方法

html实例:

1

1

1

1// 十进制写法

1// 十六进制写法 31转成十进制是49

页面显示

1

1

1

css实例:

html代码:

css代码:

.box:before{

content: '\0061';

}

页面显示

a

js实例:

html代码:

js代码:

var op = document.getElementById('p');

op.innerHTML ='\u0031';//输出1 Unicode

// op.innerHTML ='1';//输出1 十进制

// op.innerHTML ='1';//输出1 十六进制

字体图标和字体的关系

html代码:

我喜欢你

我喜欢你

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