請看下面這張我從Google gmail頁面上截的圖(這是我在同一位置第二次截圖了)：

圖中用紅色的圈圈圈中的向下的小三角就是使用的字符，非主流字符。其實呢，Google谷歌這個字符只屬于小應(yīng)用，字符真正的潛力并沒有體現(xiàn)出來，而本文將開拓性的探討如何使用字符代替圖片實現(xiàn)貌似只有圖片才能實現(xiàn)的尖角效果，或是多半使用圖片實現(xiàn)的圓角效果。對字符飛研究我并不深入，所以一些結(jié)論或方法并不是最優(yōu)的，后期可能會有更加完善的方法，所以本文題目添加beta字樣，表測試。本文提到的一些方法，可能在實際項目中并不實用，關(guān)鍵是幫助同仁們拓寬思維，展現(xiàn)字符在web開發(fā)中的潛力。
注：本文“字符”著重指含有特殊形狀，鍵盤不可直接輸入的字符。雖然英文字母ABC也算字符，但本文所提及“字符”含義上是不包含這類常見字符，下同，不贅述。

一、了解字符的一些特性

1、看清真相
字符呢，我的理解是，跟頁面上的漢字，英文字母啊等東東屬于同樣的東西。首先，字符圖案是顯示器用一個一個同樣顏色的像素點組成的，不會有鋸齒雜邊的麻煩，如果您用photoshop制作一個小三角圖片，說不定就會有可惡的白色雜邊，而字符絕不會有這個問題。其次，字符本質(zhì)上就是文字，受限于css的font-size屬性，color屬性等一切對文字起作用的屬性。

2、使用字符代替圖片的優(yōu)點
①不用去作圖摳圖了，省了多少功夫啊！對于頁面工程師來說，大大減輕了工作負(fù)擔(dān)，要知道，與小于10像素的小圖打交道很耗時間精力的。
②不用擔(dān)心雜邊的問題了，字符都是純色的像素點，想出現(xiàn)雜邊都難。
③容易控制！要想字符圖案變大，font-size設(shè)大的就行了，要變顏色，使用color就可以了。所以呢，字符很乖很好控制滴。要是圖片，你讓他變個色試試看，你不是劉謙，你也不是哈里比特，所以你不行的。
④頁面加載大小變小了。學(xué)計算機的應(yīng)該都知道，一個英文字符一字節(jié)，一個中文字符兩字節(jié)。雖然我不知道形色各異的字符們是愛國之士還是媚外之族，但不管怎樣，最多兩字節(jié)（單位b），要是圖片的話，雖然我沒有驗證過，但是按照經(jīng)驗來講，應(yīng)該比字符占用空間大吧。
⑤理論上，頁面鏈接請求少了。為何稱理論上呢，因為實際上，圖片呢都是整合到一張圖片上的(css Sprite)，所以即使少了一張小圖，整個頁面請求圖片的次數(shù)還是不變的。但要是這張小小的圖片是獨立的呢，那不久少了一次圖片請求了嗎？那服務(wù)器可就happy了！

3、字符的缺陷
①不同瀏覽器下的表現(xiàn)。
現(xiàn)在假設(shè)IE瀏覽器代表中國，F(xiàn)irefox瀏覽器代表韓國。中國某女性(♀)去了趟韓國，結(jié)果相貌另外一個樣子了。術(shù)語為：有些字符在不同瀏覽器下的表現(xiàn)不一致。這類不一致分為兩類，一類不一樣是由于整容，換了張臉，這個沒得救了，想回到過去比叫林志玲給您捶背還難；還有一類是美容了，使用了香奈兒或是雅詩蘭黛的化妝品保養(yǎng)了個把月，結(jié)果芙蓉姐姐大變身，丑小鴨變美小鴨，那還有得救，讓其做兩個月程序員，保證回到從前。做程序員只是玩笑性質(zhì)的比喻，實際上是通過設(shè)定字體(font-family)達(dá)到表現(xiàn)的一致，這個本文后面會說到。
②占據(jù)大小定位等比較難以控制。
字符本質(zhì)上不同于圖片，沒有明確的高寬，如果對頁面上文字的特性了解不夠，想實現(xiàn)精確的且兼容性的定位麻煩不小。還有就是字符對頁面的編碼方式，何種字體敏感。比如說有些字符在gb3212中文編碼下顯示良好，但是在utf-8編碼下就是個方框框——亂碼；在宋體下顯示不錯，在其他字體下就是另外一種樣子。
③無法實現(xiàn)漸變效果。

二、字符與字體關(guān)系的一些例子

在demo頁面的第一部分就展示了本文主體相關(guān)的可能會使用的一些字符在常用字體下的一些表現(xiàn)。下面這張圖片就展示具有代表性字符差異，其差異的產(chǎn)生是由于字體的不同以及瀏覽器的不同，然而萬幸的是我們通過嘗試不同的字體可以得到兼容性的表現(xiàn)。

字符在不同字體以及不同瀏覽器下的差異

三、利用字符實現(xiàn)圓角矩形以及尖角效果

要想使用字符實現(xiàn)圓角或是尖角效果，以下一些字符可以拿來使用：
左右方向的尖角“＜＞”；上下方向尖角“∧∨”；實體尖角“► ◄ ▲