css，不止“突破瀏覽器12px限制”
之前寫(xiě)過(guò)一篇文章「小tips：如何擺脫瀏覽器下12px的限制」，不少人覺(jué)得“有點(diǎn)東西”。文中提到的“transform:scale()”方法也是利用了CSS中transform的特點(diǎn)，可以說(shuō)兼顧了效果和性能。但是它必須考慮height甚至在“動(dòng)態(tài)多行”效果時(shí)要用JS輔助的特點(diǎn)也很是讓人頭疼。
其實(shí)還可以用兩種方法解決這個(gè)限制：
SVG解決文字12px限制SVG本質(zhì)上你可以看成是一張圖片，給圖片設(shè)置width:100%就能夠跟隨容器尺寸拉伸，SVG也是如。并且由于SVG是矢量的，因此，再怎么拉伸我們的文字效果都是清晰細(xì)膩的——這種方法的原理就在于此！
SVG中<text>，<tspan>元素可以用來(lái)呈現(xiàn)文本，嵌套關(guān)系為<text>-><tspan>，個(gè)人覺(jué)得和HTML中的<p>-><span>關(guān)系類似。拿開(kāi)篇文章中的案例來(lái)說(shuō)，用svg可以這么寫(xiě)：
<divclass="mmcce-text"v-for="(item,index)incouponInfo.thresholdStr":key="index":index="index"><svgwidth="600"height="80"viewBox="0060080"><textfont-family="'PingFangSC','MicrosoftYahei'"font-size="60"x="0"y="1em">{{item}}</text></svg></div>簡(jiǎn)單來(lái)說(shuō)就是先繪制一張大圖，然后再縮小。反正也不會(huì)失真。所以在css中規(guī)定好類.mmcce-text的樣式后直接對(duì)svg設(shè)置自適應(yīng)父元素即可：
svg{width:100%;}也能達(dá)到一樣的效果。
CSS新特性：size-adjust早上吃早餐時(shí)偶然打開(kāi)MDN，發(fā)現(xiàn)有一個(gè)新特性很有趣：size-adjust，和它配套使用的是unicode-range——用來(lái)規(guī)定哪些字符遵循size-adjust的規(guī)則。
它們都被使用在@font-face特性中。還是拿之前的例子。但是我們要注意一點(diǎn)：對(duì)于和入前文案例中說(shuō)的“后端吐出動(dòng)態(tài)數(shù)據(jù)”一樣的場(chǎng)景中，就大可不必使用unicode-range了，畢竟也沒(méi)啥用。
@font-face{font-family:smallHeight;src:url(‘/assets/font/PingFangSC-Light.ttf‘),url('/assets/font/PingFangSC-Light.woff'),url('/assets/font/PingFangSC-Light.eot');size-adjust:50%;unicode-range:U+5143;}它設(shè)置的是文字縮小到font-size值的百分之多少！因?yàn)樗淖兊氖亲煮w文件底層的字形顯示，不受12px尺寸的限制。
其它場(chǎng)景應(yīng)用這玩意的另一個(gè)場(chǎng)景就需要搭配unicode-range了。比如在電商頁(yè)面中，前置的“￥”或者后置的“元”、“小數(shù)點(diǎn)及后兩位數(shù)字”的縮小，都可以利用這兩個(gè)特性完成：
@font-face{font-family:miaoshaJia;src:url(‘/assets/font/PingFangSC-Light.ttf‘),url('/assets/font/PingFangSC-Light.woff'),url('/assets/font/PingFangSC-Light.eot');size-adjust:50%;unicode-range:U+5143;}/**使用*/.price{font-family:miaoshaJia;font-size:24px;color:red;}unicode-range:U+5143;的意思就是“設(shè)置元這個(gè)字符的大小匹配size-adjust規(guī)則”。U+5143就是“元”的Unicode編碼。
否則就只能用兩個(gè)標(biāo)簽或者:first-letter了...css里面暫時(shí)還沒(méi)有諸如「last-letter」這樣的偽類設(shè)計(jì)。所以總的來(lái)說(shuō)比較“不簡(jiǎn)潔”。
src中引入的字體這玩意就需要下載專門(mén)的字體庫(kù)了。比如上面用的就是常用而美觀的“蘋(píng)方字體”。一般來(lái)說(shuō)如果是靜態(tài)文案使用這種方法完全用不了這么大的字體庫(kù)，這么說(shuō)來(lái)，這種方案反而對(duì)于項(xiàng)目加載是一種“拖累”？
其實(shí)不然，我們可以使用比如“字蛛”來(lái)提取所需要的幾個(gè)/幾十個(gè)文字將他們壓縮打成一個(gè)新的包，這個(gè)包的大小往往只有原來(lái)的好多分之一。然后再去引入新的包使用就好。
筆者曾在公司內(nèi)部分享時(shí)就對(duì)這種方式做過(guò)詳細(xì)而自以為成熟的解說(shuō)。隨后開(kāi)始被我司在一些“藝術(shù)字”等場(chǎng)景中開(kāi)始代替圖片使用和探索...
不過(guò)，唯一有些疑惑的是我曾經(jīng)在不知道哪看到過(guò)這樣的寫(xiě)法：src:local('PingFangSC');，遂查找資料，未果，作罷。
蘋(píng)方字體是ios9上的默認(rèn)中文字體，蘋(píng)方黑體不僅字型優(yōu)美，并且能提升在手機(jī)、電腦屏幕上的清晰度和易讀性。包含6種字重，分別是蘋(píng)方黑體常規(guī)體、中等、細(xì)體、特粗體、特細(xì)體、粗體，可以很不錯(cuò)地滿足日常設(shè)計(jì)和閱讀的需要。放上“蘋(píng)方字體庫(kù)”：PingFang（騰訊微云免密下載鏈接，速度嘎嘎快）
支持度只是，這個(gè)css特性的支持程度還不樂(lè)觀。比如Safari就完全不支持，即使如Chrome也僅僅在92版本往后開(kāi)始支持。仍任重而道遠(yuǎn)：
結(jié)語(yǔ)，億點(diǎn)點(diǎn)想法夏天快到了，天氣回暖萬(wàn)物復(fù)蘇，最是好時(shí)光。我非常提倡多出去走走欣賞一些美好的事物，順便提升一下自己的美感（這一條針對(duì)我自己）。但要注意防護(hù)哦！話說(shuō)天氣一回暖疫情又嚴(yán)重了起來(lái)，祈禱，我還想回學(xué)校畢個(gè)業(yè)呢，真的是。然后互聯(lián)網(wǎng)圈子似乎斷崖式下跌，還是要穩(wěn)住啊?提升自己！近來(lái)很是巴適，有春風(fēng)、朋友、美酒和燒烤。還實(shí)現(xiàn)了摸魚(yú)的夢(mèng)想。我就知道這個(gè)公司我來(lái)對(duì)了...
回到文章內(nèi)容。svg作為一個(gè)矢量圖，其在系統(tǒng)支持下能最大程度發(fā)揮GPU的性能，提升整體渲染效率，而且展示效果也優(yōu)于常見(jiàn)圖片格式，其非常適合在icon等場(chǎng)景使用。畢竟我們都知道，一般圖片格式如PNG、JPEG都無(wú)法被GPU直接讀取（位圖基本都經(jīng)歷了采樣、量化、編碼的過(guò)程），需要先經(jīng)過(guò)CPU解碼后再上傳到GPU使用，解碼后的數(shù)據(jù)以RGB(A)存儲(chǔ)，正常狀態(tài)下是無(wú)壓縮的。那么大的圖，嘖嘖。而矢量圖在輸入時(shí)根本不需要采樣和量化，最重要的是，減少了文件請(qǐng)求，渲染幾乎是無(wú)延時(shí)的。這就節(jié)省了一部分時(shí)間，直接起飛~大眾點(diǎn)評(píng)詳情頁(yè)基本所有的大小數(shù)字都是svg做的，也是...離譜！
不管是單一的說(shuō)圖片，還是說(shuō)頁(yè)面、css的優(yōu)化。最主要的無(wú)非：“跳過(guò)”CPU或GPU介入。在游戲中大放光彩的“紋理壓縮技術(shù)”其優(yōu)勢(shì)之一就是“無(wú)需CPU解碼能夠直接被GPU讀取和渲染”！
倒是font-face不能濫用。瀏覽器對(duì)于這種“利器”的加載策略也不是完全放手的那種。瀏覽器加載WebFonts時(shí)按順序會(huì)有三個(gè)時(shí)期：
阻塞期（BlockPeriod）。在此期間如果字體沒(méi)有加載完成，那么瀏覽器會(huì)使用font-family指定的字體列表中的后備字體（Fallback）進(jìn)行渲染，但是顯示為空白，也就是對(duì)于用戶是不可見(jiàn)的。在此期間字體加載完成之后才能正常顯示該字體
交換期（SwapPeriod）。跟阻塞期類似，但是在這個(gè)時(shí)期內(nèi)，它會(huì)在字體加載時(shí)，先用后備字體渲染文本并顯示出來(lái)（而不是顯示空白），在此期間字體加載完成之后才能正常的顯示該字體
失敗期（FailurePeriod）。如果字體加載失敗，則使用后備字體顯示文本
雖說(shuō)可以用font-display跳過(guò)阻塞期（swap值），但終究是“后置改變”的。如果碰上很拉胯的網(wǎng)絡(luò)又沒(méi)有做好前置處理，就很糟糕。
相關(guān)評(píng)說(shuō)：
仁和區(qū)飛輪： ______ body { font-size:12px; font-family:Arial, Helvetica, sans-serif; filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100); background-color:#666666; }.sizscolor { position:absolute; padding:4px; filter: Dropshadow(offx=1,offy=0,color=white) ...
仁和區(qū)飛輪： ______ body控制整個(gè)body部分的樣式,由于css具有繼承性,說(shuō)明整個(gè)頁(yè)面的字體都會(huì)是宋體,而且大小是12px.除非其中的某個(gè)元素再明確地定義自己的字體樣式. * 是通配符,表示所有的元素都會(huì)是這種樣式, 即 網(wǎng)頁(yè)中所有的元素 margin,padding,border都會(huì)是0. (這樣定義是為了解決ie和標(biāo)準(zhǔn)瀏覽器之間的兼容性:比如說(shuō)ul如不明確指出padding和margin的值,在ie和火狐里顯示的邊距會(huì)不一樣) 這樣定義之后,ie和火狐都會(huì)是0,然后再在需要設(shè)置margin和padding和地方明確設(shè)置值是多少.這樣顯示效果就一樣了.
仁和區(qū)飛輪： ______ 明蘭,或 文泉驛等寬.個(gè)人偏愛(ài)明蘭.
仁和區(qū)飛輪： ______ 這里首先需要知道CSS的一些特性:優(yōu)先級(jí)/特殊性、繼承、層疊這三種工作機(jī)制. 根據(jù)優(yōu)先級(jí) * 是沒(méi)有 #wrapper優(yōu)先的.也就是如果id=＂wrapper＂的div元素中只有文字,沒(méi)有p元素和span元素的話,那么這些文字就會(huì)是 60px大小. 但實(shí)際...
仁和區(qū)飛輪： ______ 兼容各種瀏覽器目前是無(wú)法實(shí)現(xiàn)的,更多技巧 http://hi.baidu.com/delpan7/blog/item/debaba0363335b047bec2c09.html 兼容技巧1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決) 2, 居中問(wèn)題. 1).垂...
仁和區(qū)飛輪： ______ 常見(jiàn)的瀏覽器兼容性問(wèn)題與解決方案大致有以下九種形式: 一、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外邊界和內(nèi)填充不同 問(wèn)題表現(xiàn):不加樣式控制下,margin和padding差異較大 解決方案:css里 *{margin:0; padding:0;} 備注:這是最常見(jiàn)也是最易...
仁和區(qū)飛輪： ______ 設(shè)置font-size為百分比,瀏覽器有字體默認(rèn)大小的. 例如:font-size:150%
仁和區(qū)飛輪： ______ 1. 3px Bug描述:IE下兩個(gè)div之間會(huì)出現(xiàn)3個(gè)像素的Bug,這個(gè)bug是在當(dāng)對(duì)一個(gè)div用了float元素時(shí),而div未使用時(shí)則會(huì)出現(xiàn). 解決方法:a.對(duì)另一個(gè)元素同時(shí)使用float; b.為已經(jīng)浮動(dòng)的div添加一條語(yǔ)句:margin-right:-3px; 或者margin-left:-3px;...
仁和區(qū)飛輪： ______ 1;肯定是你哪里定義的沖突了.2;你可以把你的文件打包傳上來(lái)讓我們看看.3;不然的話肯定是有改變的.4;你把font-size:2em;改成font-size:12px;然后把數(shù)字依次12改成18,24看下.記得保存文件,然后刷新頁(yè)面.
仁和區(qū)飛輪： ______ div+css網(wǎng)頁(yè)布局在各個(gè)瀏覽器之間的差異 1、 IE6、IE7、Firefox之間的兼容寫(xiě)法: 寫(xiě)法一: IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;IE6能識(shí)別*,但不能識(shí)別 !important,IE7能識(shí)別*,也能識(shí)別!important; FF不能識(shí)別*,但能識(shí)別!...
