請看下面這張我從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é)計算機(jī)的應(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)圓角或是尖角效果，以下一些字符可以拿來使用：
左右方向的尖角“＜＞”；上下方向尖角“∧∨”；實體尖角“? ? ▲▼”；實體圓：“●”；空心圓“○”；四分之一空心圓“╰ ╯╭ ╮”以及正棱形“◆”。一、字體與字符顯示的關(guān)系

這里左右方向的尖角，字體為宋體：<> 
不受字體影響型：＜＞

這里左右方向的尖角，字體為Arial：<> 
不受字體影響型：＜＞

這里左右方向的尖角，字體為Lucida Sans Unicode：<> 
不受字體影響型：＜＞

這里左右方向的尖角，字體為Times New Roman：<> 
不受字體影響型：＜＞

這里左右方向的尖角，字體為Verdana：<> 
不受字體影響型：＜＞

這里上下方向的尖角，字體為宋體，小尖角：ˇ^ 
不受字體影響型：∧∨

這里上下方向的尖角，字體為Arial，小尖角：ˇ^ 
不受字體影響型：∧∨

這里上下方向的尖角，字體為Lucida Sans Unicode，小尖角：ˇ^ 
不受字體影響型：∧∨

這里上下方向的尖角，字體為Times New Roman，小尖角：ˇ^ 
不受字體影響型：∧∨

這里上下方向的尖角，字體為Verdana，小尖角：ˇ^ 
不受字體影響型：∧∨

這里是45度尖角，字體為宋體：∠

這里是45度尖角邊形實體，字體為Arial：∠

這里是45度尖角，字體為Lucida Sans Unicode：∠

這里是45度尖角，字體為Times New Roman：∠

這里是45度尖角，字體為Verdana：∠

這里是實體尖角，字體為宋體：? ? ▲▼

這里是實體尖角，字體為Arial：? ? ▲▼

這里是實體尖角，字體為Lucida Sans Unicode：? ? ▲▼

這里是實體尖角，字體為Times New Roman：? ? ▲▼

這里是實體尖角，字體為Verdana：? ? ▲▼

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為宋體：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Arial：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Lucida Sans Unicode：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Times New Roman：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Verdana：●

這里是一個空心的圓形，字體為宋體：○

這里是一個空心的圓形，字體為Arial：○

這里是一個空心的圓形，字體為Lucida Sans Unicode：○

這里是一個空心的圓形，字體為Times New Roman：○

這里是一個空心的圓形，字體為Verdana：○

這里是四分之一圓弧，字體為宋體：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Arial：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Lucida Sans Unicode：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Times New Roman：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Verdana：╰ ╯╭ ╮

四、實現(xiàn)實色背景的圓角矩形

以四分之一實體圓填充四個角實現(xiàn)含有背景色的圓角效果。

<div class="sharp_square">
???? <span class="quarter_round round_lt"><span class="lt">●</span></span>
???? <span class="quarter_round round_rt"><span class="rt">●</span></span>
???? <span class="quarter_round round_lb"><span class="lb">●</span></span>
???? <span class="quarter_round round_rb"><span class="rb">●</span></span>
</div>

.sharp_square{width:333px; height:110px; background:#a0b3d6; position:relative; color:#a0b3d6;}/*IE6下有個奇偶bug，為避免1像素誤差，高寬為偶數(shù)*/
.sharp_square .quarter_round{position:absolute;}
.sharp_square .quarter_round span{background:white;}
.sharp_square .round_lt{left:-1px; top:0px;}
.sharp_square .round_rt{right:-1px; top:0px;}
.sharp_square .round_lb{left:-1px; bottom:0px;}
.sharp_square .round_rb{right:-1px; bottom:0px;}

最新評論