CSS 瀏覽器的等寬空格問(wèn)題解決
但是 也不是很可靠,比如空格間距非常大,那么我們必須增加多個(gè)占位符,同時(shí)頁(yè)面的體積會(huì)變得非常大。
同時(shí),注意到 Safari 中的 寬度是已設(shè)定字符的空格寬度(Safari 的默認(rèn)字體為 Times),也就是說(shuō)一個(gè)中文字符需要兩個(gè)占位符。
具體情況如下圖所示:
其實(shí),這不是 Safari 的問(wèn)題,而是字體的問(wèn)題。解決的方式就是使用下面的屬性
font-family: '宋體';將 Safari 的默認(rèn)字體設(shè)置成“宋體”等中英文等寬的字體,就能解決。Windows 版本的 Safari 字體設(shè)置,需要直接使用中文“宋體”這樣的名稱而不是“Simsun”(了解原因的兄弟請(qǐng)告訴我)。
但至此,我們的根本目標(biāo)沒(méi)有解決,就是能否避免使用 這樣的占位符,而使用“原生”的空格??紤]針對(duì)空白的相應(yīng) CSS 屬性,具體了解有關(guān) white-space 的用法,接下來(lái)就比較好處理了。
總結(jié)下使用 white-space 實(shí)現(xiàn)等寬空格的條件,有兩個(gè)。需要設(shè)置對(duì)應(yīng)的屬性
white-space: pre;
然后設(shè)置等寬字符(包括等寬空格)即可。綜合起來(lái),就是這樣
font-family: '宋體', Simsun;
white-space: pre;
由于使用了中文 CSS 名稱,所以在實(shí)際使用中需要考慮樣式的字符編碼問(wèn)題。同時(shí),需要額外考慮的是,蘋果機(jī)是否有“宋體”(或者其他等寬的字體),有蘋果機(jī)的兄弟請(qǐng)幫忙測(cè)試下。
--Split--
感謝 小馬 提供的另外一個(gè)思路,就是使用 em 單位。1em 簡(jiǎn)單的說(shuō),就可以認(rèn)為是一個(gè)字符寬度;同理,.5em 就是半個(gè)字符。那么,上面的情況就可以使用這樣寫。
<span>買<ins class="half-word"></ins>寶<ins class="half-word"></ins>貝:</span><br />
<span>我的淘寶:</span><br />
<span>社<ins class="two-word"></ins>區(qū):</span><br />
對(duì)應(yīng)的 CSS 應(yīng)為
.half-word {width: .5em;}
.two-word{width:2em;}
經(jīng)測(cè)試通過(guò)。
--Split--
針對(duì)這上述的兩種不同方法,個(gè)人認(rèn)為應(yīng)當(dāng)按照實(shí)際情況考慮采用。比如第一種方法,雖然依賴具體的等寬字體,但沒(méi)有添加其他額外的結(jié)構(gòu),對(duì)于以后的維護(hù)會(huì)更加的方便;第二種方法,則更多的考慮了實(shí)際的應(yīng)用情況(同時(shí)也不用依賴具體的等寬字體),但是也添加了額外的結(jié)構(gòu)。
所以,如考慮到以后的可維護(hù)性,同時(shí)“語(yǔ)義”的角度上分析,推崇第一種做法。而實(shí)際的應(yīng)用情況下,同時(shí)需要應(yīng)用比較復(fù)雜時(shí),個(gè)人會(huì)選用第二種。
相關(guān)文章
Web標(biāo)準(zhǔn)學(xué)習(xí)資源(書籍、網(wǎng)站)推薦
Web標(biāo)準(zhǔn)學(xué)習(xí)資源(書籍、網(wǎng)站)推薦...2007-02-02WEB標(biāo)準(zhǔn)網(wǎng)頁(yè)布局中盡量不要使用的HTML標(biāo)簽
CSS網(wǎng)頁(yè)布局中不推薦使用的HTML標(biāo)簽,請(qǐng)盡量不要使用這些HTML標(biāo)簽。2008-09-09解決ie動(dòng)態(tài)修改link樣式,import css不刷新的問(wèn)題
當(dāng)我們需要?jiǎng)討B(tài)更新link的樣式的時(shí)候,通常是直接修改link的 href 屬性。但是如果樣式里有import的樣式表,IE就不會(huì)在發(fā)起請(qǐng)求去刷新了(其他瀏覽器都是正常的)2008-05-05網(wǎng)頁(yè)制作中十個(gè)最好的CSS hacks
轉(zhuǎn)自國(guó)外網(wǎng)站,本想翻譯成中文,但是細(xì)看文章實(shí)在是簡(jiǎn)單,如果看不懂這個(gè),我想也就沒(méi)必要繼續(xù)做前端了。2008-02-02引用字體時(shí)圖標(biāo)無(wú)法顯示_字體文件不存在問(wèn)題
最近一個(gè)項(xiàng)目,css,js等靜態(tài)資源做了cdn部署,瀏覽網(wǎng)站時(shí)發(fā)現(xiàn)font?awesome字體圖標(biāo)通通不能正常顯示。只有一些奇怪的符號(hào)。瀏覽器控制臺(tái)報(bào)錯(cuò)信息:font-face引用字體跨域。2023-06-06網(wǎng)頁(yè)布局設(shè)計(jì)的標(biāo)準(zhǔn)尺寸
許多的網(wǎng)頁(yè)設(shè)計(jì)在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)時(shí),進(jìn)行界面網(wǎng)頁(yè)的寬度尺寸設(shè)計(jì)都比較迷茫,800*600尺寸及1024*768尺寸的分辨率下,網(wǎng)頁(yè)應(yīng)該設(shè)計(jì)為多少像素才合適呢?太寬就會(huì)出現(xiàn)水平滾動(dòng)條了,下面我們就網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)尺寸進(jìn)行講解.2008-03-03web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合2
web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合2...2006-11-11html工作中表格<tbody>標(biāo)簽的使用技巧
公司大部分的項(xiàng)目都是基于BS結(jié)構(gòu),UI設(shè)計(jì)階段做WEB原型頁(yè)面時(shí)要把各種交互效果實(shí)現(xiàn)出來(lái),與真正的后臺(tái)編程不同,就用JS前臺(tái)編程來(lái)實(shí)現(xiàn),讓程序員編程前知道要做成什么樣的效果就行了。2008-09-09