最近一年筆者一直被一個問題困擾許久，那就是瀏覽網頁的時候常常看到原本應該要是小圖示的地方變成方格或是亂碼。因為看其他人的電腦和瀏覽器好像不會有問題，所以原先以為是Linux Mint上Firefox的BUG，會不支援CSS使用到Content屬性而出現亂碼，但直到最近才找到真正的原因。
底下是使用了Content CSS做成的圖示範例。
正常的話，頁面應該要長成以下這個樣子：
不正常的話，可能會變成以下的樣子：
會變成方格和亂碼的原因不是瀏覽器的BUG，而是偷懶的網頁設計師在替網頁加入圖示的時候，不是使用正常圖片的圖示。
什麼是不正常圖片的圖示呢？
一般圖示的格式是使用PNG、GIF、JPG等等的一般圖檔，但是最近似乎掀起一股把字型(Font)當成圖示來用的風潮。也就是將數個圖示的形狀畫成字型(用一般的字型編輯器就可以做到)，一個圖示對應字型的一個編碼(例如數值1、數值2，分別對應到一個畫好的圖示)，再存成單一的字型檔案(ttf、otf、woff、woff2等)，然後利用CSS提供的@font-face將自製的字型檔案以font-family屬性來指定。就跟一般指定網頁文字字型的方式一樣，只不過此時的字型不是文字，而是圖示，再配合CSS的Content屬性，來直接指定文字的編碼，例如「content: "\e000";」就是第一個圖示，「content: "\e001";」就是第二個圖示。
這樣的詭異字型其實很久以前就有了，稱為Icon Font。用這種作法做出來的圖示可以任意的修改大小和顏色，十分方便，甚至還有許多網站提供自動產生Icon Font與CSS的服務，也造成愈來愈多網頁設計師用這種方式來將圖示放置在網頁中。
因為這類的圖示其實是一個字碼對應的字型，要是網頁瀏覽器拒絕使用CSS的font-family的字型設定的話，那圖示就顯示不出來了，圖示文字常用的編碼000、001、002，在一般的文字字型中也無法對應，因此出現方格、空白和亂碼。
許多人喜歡修改網頁瀏覽器的字型(強制套用到所有網頁)，有的甚至連整個作業系統的字型也都改成自己喜歡的樣子。若是碰到這種一定要能夠接受font-family CSS才能正常瀏覽的網站，就表示原本自己調整好的字型設定一定要再改成網頁字型優先才會正常，那感覺一定很差。也許還有很多人不知道出現方格、空白和亂碼的原因，忍耐著看網頁呢！
所以說，寫網頁放圖示，還是乖乖用一般的圖檔吧！用background CSS或是img標籤放圖示才是大眾解決之道。