作者：zccst
最近見到一種圖標寫在content里的用法，覺得很新奇。查了一下是webfont。
問題：以下是我看到的一段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";
}
其中不太明白的是\f309
這些是如何定義的，我在網上找也沒有找到。
在 利用css的content:'f003'生成的內容，這里用到的是什么技術？ 里有人提到，就是我想問的。但是我也找了回答給出的鏈接，還是不特明白。
現在我想在這個基礎上自己做一個分享到豆瓣的小圖標。不知道應該怎么搞？
現在的效果就會是這個樣子的。我要繼續仿照應該怎么搞？
解答：
這個是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 App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator
下面是在網上找到的關於content的用法。
1，最基本的 – 生成內容
content使用如下：
h2:before {
content: "我是額外文字！";
}
此段樣式的作用是在每個h2標簽的前面添加文字“我是額外文字”。
2，使用計數器常見號碼內容。
ul和li有sectioncounter屬性
3，為多語言內容插入正確的引號
不同的語言使用不同的引號字符。比如英文的引號就是""，而中文引號就是“”。使用content可以使得不同的語言使用對應的一些字符。例如，我們需要對下面的些文字添加其對應語言的引號，該怎么辦呢？
<p lang="en"><q>It’s only work if somebody makes you do it.</q></p> <p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p> <p lang="ch"><q>歡迎來到上海，歡迎參觀世博會！</q></p>
我們不妨試試下面的代碼：
/* 為不同語言指定引號的表現 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";}
/* 在q標簽的前后插入引號 */
q:before {content:open-quote;}
q:after {content:close-quote;}
4，用圖片替換文字
關於圖片替換技術，您可以參見這里：several image replacement techniques，里面提供了幾種方法。而這里展示的則是另外不同的用圖片替換方法，使用的是content。
您可以參見下面的代碼：
div.logo {
content:url(logo.png);
}
這種圖片替換技術的優點在於文字內容確實被替換了。因此，您沒有必要設定高寬為圖片的顯示創造空間，或是使用text-indent或是padding隱藏最初的文字。
然而，就目前而言，還是有不少需要注意的：
1）你不能對圖片進行重復或平鋪，或是使用image sprite。
2）目前僅在Opera 9.5+ 和 Safari 4+瀏覽器下起作用，因為這些瀏覽器支持所有元素的content方法，而不僅僅局限於:after或是:before。
替換的圖片無法應用alt屬性，所以一些特殊的使用屏幕閱讀器的用戶可能無法理解您替換的圖片的含義。
5，顯示相對應的鏈接圖標
指的是針對不同的鏈接類型，在鏈接的后面顯示對應鏈接類型的圖標，例如，鏈接的對象是一個圖片，則顯示圖片的小圖標，如果鏈接對象是視頻，則顯示視頻小圖標，如果鏈接就是個URL網頁鏈接，則顯示鏈接的小圖標。您可以參見下面的代碼：
p a[href $=".pdf"]:after {
content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
content:url(../image/icon_link.png);
}
<p>您可以查看此PDF文件：<a href="/sample.pdf">web站點的性能優化.pdf</a>，或是在線查看，<a href="http://www.zhangxinxu.com/wordpress/" rel="external">點擊這里</a>。</p>
結果如下圖所示：
