css content 如何自定义生成图标？
时间：2024-01-26 14:00:01 | 来源：网站运营
时间：2024-01-26 14:00:01 来源：网站运营
css content 如何自定义生成图标？：这个是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，一般就选在这一部分。
（上面这段讲得可能不专业，大致知道是这么一回事就行。）
要使用自定义字符，大致步骤是：
- 自己造一个字体文件，把e000所对应的字符形状画上新浪的icon，保存为常用字体文件格式。
- 在css中使用font-face引用这个字体文件，任意命名（不和已有的重复，比如叫myfonticon）
- 需要显示图标的地方定义font-family为myfonticon，content属性设为"/e000"。
造字可以用Fontographer 5，参考这篇文章
webfont应用系列（二）如何制作图标字体？
其实网上已经有一大堆免费好用webfont icon，比如：
IcoMoon AppIonicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator
在线咨询
