Jquery中文網 www.2030036.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 CSS3 等寬字體與ch單位的詳解

CSS3 等寬字體與ch單位的詳解

發布時間:2020-05-07   編輯:www.2030036.live
jquery中文網為您提供CSS3 等寬字體與ch單位的詳解等資源,歡迎您收藏本站,我們將為您提供最新的CSS3 等寬字體與ch單位的詳解資源
下面我們來看一篇關于CSS3 等寬字體與ch單位的使用方法介紹,希望這篇文章能夠讓各位理解到css中ch單位及字體等寬問題哦。

一、什么是等寬字體?

所謂等寬字體,一般是針對英文字體而言的。東亞字體,據我所知,應該都是等寬的,就是每個字符在同等size下占據的寬度是一樣的。但是英文字體就不一定了,就難本文來說,我下面寫一個單詞,什么呢,就iMac吧,大家打開自己的像素眼,就會很明顯地發現這個字符’i’要不其他字符,例如’M’占據的寬度要小。什么,你看不出來。好吧,那我換種呈現方式,如下:

iiiiii
MMMMMM

上面6個i,下面6個M。怎么樣,是不是i瘦了好幾圈??!

i和M字符占據寬度對比

但是,如果是等寬字體。

例如:Consolas, Monaco, monospace,則身材就一樣了:

iiiiii
MMMMMM

等寬字體的截圖

像Consolas, Monaco, monospace這樣可以讓英文字符同等寬度顯示的字體呢就稱為等寬字體。

那等寬字體在web中有什么用呢?

二、等寬字體與代碼呈現

我們寫代碼的,無論是什么語言,易讀是第一位,使用等寬字體,我們閱讀會更輕松舒服。因此,一般編輯器使用的字體或者web上需要呈現源代碼的字體都是等寬字體。

例如,我的demo示意頁面的源代碼們就是等寬的:

 

三、等寬字體與圖形呈現實例一則

某工具有個功能,通過下拉選擇,可以改變元素的邊框樣式,也就是borderStyle在solid/dashed/dotted間切換。

大家都知道的,原生的<select>的<option>元素的innerHTML只能是純text字符,不能有html,也不支持偽元素,因此,用來模擬solid/dashed/dotted,只能使用字符,但是,字符,你懂的,就像某個部位,有長有短,要想模擬成像樣的規整的圖形,可以嗎?

疑問

可以,試試使用等寬字體。

邊框類型模擬 邊框效果

四、CSS3 ch單位與等寬字體布局

CSS3 vw,vh單位想必耳熟能詳,PC端滾動條晃動問題利器,PC/Mobile端布局,以及和calc結合實現真正流式文字排版,但是ch就可憐的多,幾乎無人問津,實際上,人家也有很精妙的技能的。

ch和em,rem,ex一樣,是CSS中為數不多和字符相關的相對單位。和ch相關的字符是0,沒錯,就是0123456的那個阿拉伯數字0. 1ch表示一個0字符的寬度,所以000000所占據的寬度就是6ch。

但是,實際上,我們網頁內容的字符不可能都是0,所以,這個單位乍看就顯得很雞肋。實際上,此單位,基本上,必須與等寬字體一起使用才有用。

所以,ch單位的潛臺詞就是,“沒有等寬字體我就是廢柴”!

為什么呢?你想要,比方說有個單詞,叫做”iPhone10″, 如果是等寬字體,由于所有字符占據寬度和0一樣,則,此單詞占據寬度就是精確的8ch, 我們就能精確控制字符的布局。

像ch這樣的單位,表面上看上去廢柴,但是遇到一些特殊場景,就會顯得?諾牟壞昧恕?/p>

布局實例

之前有寫過文章,“CSS3 animation實現點點點loading動畫”,有box-shadow模擬,還有border background模擬,以及申請專利的text-shadow模擬,然后,自從我見到了CSS3 ch單位,我才發現,還有更好的方法。由于有了ch單位,配合等寬字體,我們就可以指定每個字符占據的精確寬度,于是,我們就可以使用text-indent輕輕松松實現打點效果。

HTML如下:

訂單提交中<dot>...</dot>
CSS如下:

@supports (display:none) {
      dot {
        display: inline-block;
        width: 3ch;
        text-indent: -1ch;
        vertical-align: bottom;
        overflow: hidden;
        animation: dot 3s infinite step-start both;
        /* 等寬字體很重要 */
        font-family: Consolas, Monaco, monospace;
    }
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}

然后就有類似這樣的效果(偷懶,非真實截圖,以前做的圖):
點點點gif動畫效果

IE13 ,Chrome,FireFox瀏覽器用戶可以狠狠地點擊這里:CSS3 ch單位等寬字體下的字符打點loading動畫demo

為何忽略IE10,IE11?
雖然說,IE9瀏覽器就開始支持ch單位了,但是,根據caniuse的說法,IE9-IE11的ch代碼的是”0″字符本身的寬度,字符左右的那點間隙是忽略的,所以在這幾個IE下,3ch的寬度要比’000’的實際寬度要短。一旦字符寬度不嚴格,使用text-indent就不能精確控制顯示的字符點的個數,嗝屁!因此,省得麻煩,只對IE13 做了打點動畫處理。

然而,經過我不太嚴格的測試,IE10,IE11瀏覽器似乎還行,IE9瀏覽器的寬度是明顯有問題的。

時間原因,我也沒深究。

五、結束語

凌晨3點了,以為我勤奮寫文章寫到這個時間點嗎?再次想多了,看動漫,一口氣看了13級,科科,不然,11,12點就可以睡了。不能讓家里的領導知道,大家幫我保密。

CSS屬性只要設計出來,并且瀏覽器很開心的支持,肯定是尤其原因和使用之處的。雖然,可能用處比較小眾,平時不太關注。但是,關鍵時刻,卻是棘手難題解決的利器。上面打點動畫就是很好的例子,實現越來越簡單干脆,基本上迭代了4~5個版本了。

您可能感興趣的文章:
有關php的curl_setopt函數相關應用及介紹
CSS3中如何充分使用視窗單位來布局
php curl模擬登錄discuz并模擬發帖的實現方法
js獲取屏幕高度與寬度
js 獲取與設置css3屬性值的方法介紹
php curl put方式提交與接受數據的實例代碼
JS獲取屏幕、瀏覽器窗口大小、網頁高度寬度的方法詳解
6款新穎的jQuery和CSS3進度條插件推薦
Jquery圖形報表插件 jqplot簡介及參數詳解
js獲取屏幕高度 js屏幕屬性信息

[關閉]
888棋牌金花app 山东十一选五走势图一牛 河北十一选五中奖助手 股票历史数据 湖北十一选五走势图号码遗漏 棋牌源码搭建全套教程 黑龙江11选五新版走势图 泳坛夺金体育彩票 中国股指期货配资网 广西体彩11选5走势图 秒速时时彩彩票平台