css content 如何自定义生成图标
2014-05-08 22:58:18;  来源:;  作者:;  评论:0 点击:

一下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标a end_cc, a twitter, a weibo {margin: 0 5px;border-bottom:
一下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标
a#end_cc, a#twitter, a#weibo {
margin: 0 5px;
border-bottom: none; }
a#end_cc:before, a#twitter:before, a#weibo:before {
font-size: 24px;
font-family: "fontello"; }

#end_cc:before {
content: "\e7a5"; }

#twitter:before {
content: "\f309"; }

#weibo:before {
content: "\f33f"; }



这个是webfont

在css里面,如果想使用某个字体,但是又担心用户电脑上没有,就可以使用font-face属性从服务器上引用这组字体。具体怎么用,搜一下font-face就很清楚了,不多说。

其中不太明白的是\f309
这一段css表示:
在节点#twitter前面,插入一段内容("\f309")。
这个内容("\f309")是一个字符,f309是这个字符的16进制unicode编码。
不理解可以把 "\f309" 改成 "\6211" ,然后查看效果。事实上 content:"我" 和 content:"\6211" 的含义是一样的。

需要知道,计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211(16进制),而字体文件的作用是规定某个字符应该用什么形状来显示。
unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon,一般就选在这一部分。
(上面这段讲得可能不专业,大致知道是这么一回事就行。)

要使用自定义字符,大致步骤是:
  1. 自己造一个字体文件,把e000所对应的字符形状画上新浪的icon,保存为常用字体文件格式。
  2. 在css中使用font-face引用这个字体文件,任意命名(不和已有的重复,比如叫myfonticon)
  3. 需要显示图标的地方定义font-family为myfonticon,content属性设为"\e000"。
造字可以用Fontographer 5,参考这篇文章webfont应用系列(二)如何制作图标字体?
本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。http://www.zhuitaiyang.com/html/divcss/665.html

相关热词搜索:css content 图标

上一篇:webfont应用系列(二)如何制作图标字体?
下一篇:使用text-overflow:ellipsis对溢出文本显示省略号

收藏
回到顶部