css content 如何自定義生成圖標(biāo)？
時間：2024-01-26 14:00:01 | 來源：網(wǎng)站運營
時間：2024-01-26 14:00:01 來源：網(wǎng)站運營
css content 如何自定義生成圖標(biāo)？：這個是webfont
在css里面，如果想使用某個字體，但是又擔(dān)心用戶電腦上沒有，就可以使用font-face屬性從服務(wù)器上引用這組字體。具體怎么用，搜一下font-face就很清楚了，不多說。
其中不太明白的是/f309這一段css表示：
在節(jié)點#twitter前面，插入一段內(nèi)容（"/f309"）。
這個內(nèi)容（"/f309"）是一個字符，f309是這個字符的16進制unicode編碼。
不理解可以把 "/f309" 改成 "/6211" ,然后查看效果。事實上
content:"我" 和
content:"/6211" 的含義是一樣的。
需要知道，計算機里面每個字符都有一個unicode編碼,比如「我」的unicode是6211（16進制），而字體文件的作用是規(guī)定某個字符應(yīng)該用什么形狀來顯示。
unicode字符集里面，E000 至 F8FF屬于用戶造字區(qū)。原本是空的，用戶可以在字體文件里面隨便定義這些字符的形狀。我們所見的webfont icon，一般就選在這一部分。
（上面這段講得可能不專業(yè)，大致知道是這么一回事就行。）
要使用自定義字符，大致步驟是：
- 自己造一個字體文件，把e000所對應(yīng)的字符形狀畫上新浪的icon，保存為常用字體文件格式。
- 在css中使用font-face引用這個字體文件，任意命名（不和已有的重復(fù)，比如叫myfonticon）
- 需要顯示圖標(biāo)的地方定義font-family為myfonticon，content屬性設(shè)為"/e000"。
造字可以用Fontographer 5，參考這篇文章
webfont應(yīng)用系列（二）如何制作圖標(biāo)字體？
其實網(wǎng)上已經(jīng)有一大堆免費好用webfont icon，比如：
IcoMoon AppIonicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator
在線咨詢