web開(kāi)發(fā)中如何使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果

這篇文章主要介紹web開(kāi)發(fā)中如何使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

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

一、了解字符的一些特性

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

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

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

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

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

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

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

要想使用字符實(shí)現(xiàn)圓角或是尖角效果，以下一些字符可以拿來(lái)使用：
左右方向的尖角“＜＞”；上下方向尖角“∧∨”；實(shí)體尖角“? ? ▲▼”；實(shí)體圓：“●”；空心圓“○”；四分之一空心圓“╰ ╯╭ ╮”以及正棱形“◆”。一、字體與字符顯示的關(guān)系

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

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

這里左右方向的尖角，字體為L(zhǎng)ucida Sans Unicode：<> 
不受字體影響型：＜＞

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

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

這里上下方向的尖角，字體為宋體，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為Arial，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為L(zhǎng)ucida Sans Unicode，小尖角：ˇ^ 
不受字體影響型：&and;&or;

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

這里上下方向的尖角，字體為Verdana，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里是45度尖角，字體為宋體：&ang;

這里是45度尖角邊形實(shí)體，字體為Arial：&ang;

這里是45度尖角，字體為L(zhǎng)ucida Sans Unicode：&ang;

這里是45度尖角，字體為Times New Roman：&ang;

這里是45度尖角，字體為Verdana：&ang;

這里是實(shí)體尖角，字體為宋體：? ? ▲▼

這里是實(shí)體尖角，字體為Arial：? ? ▲▼

這里是實(shí)體尖角，字體為L(zhǎng)ucida Sans Unicode：? ? ▲▼

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

這里是實(shí)體尖角，字體為Verdana：? ? ▲▼

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

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

這里是實(shí)體圓，由于大小有限，表現(xiàn)類似一個(gè)六邊形實(shí)體，字體為L(zhǎng)ucida Sans Unicode：●

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

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

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

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

這里是一個(gè)空心的圓形，字體為L(zhǎng)ucida Sans Unicode：○

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

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

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

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

這里是四分之一圓弧，字體為L(zhǎng)ucida Sans Unicode：╰ ╯╭ ╮

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

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

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

以四分之一實(shí)體圓填充四個(gè)角實(shí)現(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下有個(gè)奇偶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;}

以上是“web開(kāi)發(fā)中如何使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！