konakona
CSS 3 content资源分享和webfont小说明
CSS 3 content资源分享和webfont小说明

想在公司网站上应用这个技巧,特意查了下相关的技术实施,并收集了一些有用的材料来分享,嘿嘿!

 

http://blog.crazyphper.com/wp-content/uploads/2014/03/the-king_weibo_link_icon_explame_for_b-300x234.jpg

公司网站效果图

content是CSS3的一项属性,基础教程网上一搜一大把,此处省略。

此技术目前IE8以下(不含IE8)暂不支持,但这个功能本身很强大,随着近年来浏览器响起的版本战和力推WIN 8等措施,这个效果正释放这光彩…嗯,扯远了。<

webfont

[mark]

.fa-weibo:before {
content: “\f33f”;#效果见上面公司网站效果图
}

[/mark]

在节点.fa-weibo前面,插入一段内容(”\f33f”)。
这个内容(”\f33f”)是一个字符,f33f是这个字符的16进制unicode编码。
不理解可以把 “\f33f” 改成 “\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应用系列(二)如何制作图标字体?

 

一些免费得webfont:

 

 

其他资料:

 

 

http://blog.crazyphper.com/wp-content/uploads/2014/03/html-64x300.png

HTML特殊符号集

赞赏
https://secure.gravatar.com/avatar/3b712b34a0e1b689cfb524c9c6bcdc47?s=256&r=g

团哥

文章作者

继续玩我的CODE,让别人说去。 低调,就是这么自信。

发表评论

textsms
account_circle
email

konakona

CSS 3 content资源分享和webfont小说明
content是CSS3的一项属性,基础教程网上一搜一大把,此处省略。 此技术目前IE8以下(不含IE8)暂不支持,但这个功能本身很强大,随着近年来浏览器响起的版本战和力推WIN 8等措施,这个效果正释放这光彩...嗯,扯远了。
扫描二维码继续阅读
2014-03-29