爲什麼用HTML作爲字體實現github標誌？

Question

任何人都可以解釋爲什麼左上角或頁面底部中心的小octocat徽標是如何實現的？？

所有我能看到的是這樣的標記：

<span class="mega-icon mega-icon-blacktocat"></span> 

這個CSS：

.mega-icon-blacktocat:before { 
    content: ""; 
} 

.mega-icon { 
font-family: 'Octicons Regular'; 
} 

我沒有看到圖片在那裏，所以我想他們正在使用的字體。但爲什麼會有那種奇怪的字符，爲什麼它在風格上而不是在HTML中呢？

Answer 1

這是一種稱爲CSS字體的技術，他們使用字體來替換文本，並使用一個完整的圖標來替換which文本，該圖標將位於他們創建的字體文件中。

它允許標誌根據分辨率與網站無限擴展並趨於減少加載時間。它們也可以改變顏色並將其他酷CSS規則應用於它，而不像圖像。

諸如Pictos和Picons之類的東西都很相似，因爲它們提供的字體可以用字母H來顯示餅圖。