css content 如何自訂產生表徵圖？

標籤：格式   raw   font-face   mbed   向量   它的   是你   data   url   

僅愚
連結：https://www.zhihu.com/question/22022905/answer/20585820
來源：知乎
著作權歸作者所有，轉載請聯絡作者獲得授權。

1. :before（或:after）是什麼玩意？

答：虛擬元素（注意，不是偽類）。
它雖然被收錄到css3標準中，但其實主流瀏覽器都已經支援虛擬元素了，這其中包括了IE8+。
虛擬元素實際上在html dom中不存在，但會被瀏覽器渲染成html的一個節點，比如題主提到的#twitter:before，就是在#twitter這個標籤裡的開始處插入了一個子項目（節點），同理，:after是在該元素的最後插入子項目，它與以下html具有相同的效果：

<div id="twitter">    <span></span><!-- 或者一個div -->     .....</div>

虛擬元素與一個CSS屬性息息相關，就是content，顧名思義，這是定義虛擬元素內容的，如：

#twitter:before{       display:inline;       content:‘我是個虛擬元素‘;       }

相當於：

<div id="twitter">     <span>我是個虛擬元素</span>      ..... </div>

最廣泛的應用大概是這樣的：

剩下的小問題容我吃完飯來說。

==============

2.‘\f33f’是如何被顯示為表徵圖的？

答：
這裡用到了WebFont，也就是一種“字型”，這種字型包含了向量表徵圖，諸如 ‘\f33f’就是對應向量表徵圖的編碼。
你這段代碼並不全，css裡應該還包含這段：

@font-face {font-family: ‘XXX‘; /* 給你的自訂WebFont命名 */src:url(‘xxx.eot‘);src:url(‘xxx.eot?#iefix‘) format(‘embedded-opentype‘),url(‘xxx.woff‘) format(‘woff‘),url(‘xxxn.ttf‘) format(‘truetype‘),url(‘xxx.svg#micon‘) format(‘svg‘);font-weight: normal;font-style: normal;...}

它的好處是不必再使用css spirit切圖了，而且作為向量圖可以以任意你想要的尺寸顯示，另外，這種方法相容性很好（ie6 7 可以顯示，前提是你為不同的瀏覽器準備了不同的字型檔格式，如eot、woff、ttf、svg）。
如何製作它？請參見@朱勃 的答案，已經很詳細了，不再贅述。

3.直接將icon的unicode寫在html上不就成了，為什麼還得費勁加虛擬元素:before呢？

答：
從這段代碼看，你知道‘\f309‘、‘\f33f‘分別代表的是哪些表徵圖嗎？
別說你看不出來，即使WebFont的作者也看不出來啊，這些unicode編碼顯然不如html的class或者id語義化。如果在一個大型網站上多處複用這些font icon，那是相當要命的（每用一次就去查一查？），因此，就出現了一種題主展示的解決方案：

HTML:

<i class="icon icon_open"></i>

CSS:

@font-face{font-family: ‘MyFont‘; /* 給你的自訂WebFont命名 */src:url(‘xxx.eot‘);src:url(‘xxx.eot?#iefix‘) format(‘embedded-opentype‘),url(‘xxx.woff‘) format(‘woff‘),url(‘xxxn.ttf‘) format(‘truetype‘),url(‘xxx.svg#micon‘) format(‘svg‘);font-weight: normal;font-style: normal;        ...}.icon{        font-family: ‘MyFont‘;        speak:none; /* 無障礙閱讀所需要的，告訴螢幕助讀程式不要讀這個字元 */        font-size:14px;        font-variant:normal;        font-weight:normal;        text-transform: none;        ...}.icon_open:before{        content:"\f001"; /* 相應表徵圖的編碼 */        ...}

然後你只要在任何你想使用該表徵圖的地方插入HTML即可：

<nav>      <a href="open.html"><i class="icon icon_open"></i>Open</a></nav>



轉自：https://www.zhihu.com/question/22022905

css content 如何自訂產生表徵圖？