㈠ css，不止「突破瀏覽器12px限制」
之前寫過一篇文章「小tips：如何擺脫瀏覽器下12px的限制」，不少人覺得「有點東西」。文中提到的「transform:scale()」方法也是利用了CSS中transform的特點，可以說兼顧了效果和性能。但是它必須考慮height甚至在「動態多行」效果時要用JS輔助的特點也很是讓人頭疼。
其實還可以用兩種方法解決這個限制：
SVG解決文字12px限制SVG本質上你可以看成是一張圖片，給圖片設置width:100%就能夠跟隨容器尺寸拉伸，SVG也是如。並且由於SVG是矢量的，因此，再怎麼拉伸我們的文字效果都是清晰細膩的——這種方法的原理就在於此！
SVG中<text>，<tspan>元素可以用來呈現文本，嵌套關系為<text>-><tspan>，個人覺得和HTML中的<p>-><span>關系類似。拿開篇文章中的案例來說，用svg可以這么寫：
<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>簡單來說就是先繪制一張大圖，然後再縮小。反正也不會失真。所以在css中規定好類.mmcce-text的樣式後直接對svg設置自適應父元素即可：
svg{width:100%;}也能達到一樣的效果。
CSS新特性：size-adjust早上吃早餐時偶然打開MDN，發現有一個新特性很有趣：size-adjust，和它配套使用的是unicode-range——用來規定哪些字元遵循size-adjust的規則。
它們都被使用在@font-face特性中。還是拿之前的例子。但是我們要注意一點：對於和入前文案例中說的「後端吐出動態數據」一樣的場景中，就大可不必使用unicode-range了，畢竟也沒啥用。
@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;}它設置的是文字縮小到font-size值的百分之多少！因為它改變的是字體文件底層的字形顯示，不受12px尺寸的限制。
其它場景應用這玩意的另一個場景就需要搭配unicode-range了。比如在電商頁面中，前置的「￥」或者後置的「元」、「小數點及後兩位數字」的縮小，都可以利用這兩個特性完成：
@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;的意思就是「設置元這個字元的大小匹配size-adjust規則」。U+5143就是「元」的Unicode編碼。
否則就只能用兩個標簽或者:first-letter了...css裡面暫時還沒有諸如「last-letter」這樣的偽類設計。所以總的來說比較「不簡潔」。
src中引入的字體這玩意就需要下載專門的字體庫了。比如上面用的就是常用而美觀的「蘋方字體」。一般來說如果是靜態文案使用這種方法完全用不了這么大的字體庫，這么說來，這種方案反而對於項目載入是一種「拖累」？
其實不然，我們可以使用比如「字蛛」來提取所需要的幾個/幾十個文字將他們壓縮打成一個新的包，這個包的大小往往只有原來的好多分之一。然後再去引入新的包使用就好。
筆者曾在公司內部分享時就對這種方式做過詳細而自以為成熟的解說。隨後開始被我司在一些「藝術字」等場景中開始代替圖片使用和探索...
不過，唯一有些疑惑的是我曾經在不知道哪看到過這樣的寫法：src:local('PingFangSC');，遂查找資料，未果，作罷。
蘋方字體是ios9上的默認中文字體，蘋方黑體不僅字型優美，並且能提升在手機、電腦屏幕上的清晰度和易讀性。包含6種字重，分別是蘋方黑體常規體、中等、細體、特粗體、特細體、粗體，可以很不錯地滿足日常設計和閱讀的需要。放上「蘋方字體庫」：PingFang（騰訊微雲免密下載鏈接，速度嘎嘎快）
支持度只是，這個css特性的支持程度還不樂觀。比如Safari就完全不支持，即使如Chrome也僅僅在92版本往後開始支持。仍任重而道遠：
結語，億點點想法夏天快到了，天氣回暖萬物復甦，最是好時光。我非常提倡多出去走走欣賞一些美好的事物，順便提升一下自己的美感（這一條針對我自己）。但要注意防護哦！話說天氣一回暖疫情又嚴重了起來，祈禱，我還想回學校畢個業呢，真的是。然後互聯網圈子似乎斷崖式下跌，還是要穩住啊?提升自己！近來很是巴適，有春風、朋友、美酒和燒烤。還實現了摸魚的夢想。我就知道這個公司我來對了...
回到文章內容。svg作為一個矢量圖，其在系統支持下能最大程度發揮GPU的性能，提升整體渲染效率，而且展示效果也優於常見圖片格式，其非常適合在icon等場景使用。畢竟我們都知道，一般圖片格式如PNG、JPEG都無法被GPU直接讀取（點陣圖基本都經歷了采樣、量化、編碼的過程），需要先經過CPU解碼後再上傳到GPU使用，解碼後的數據以RGB(A)存儲，正常狀態下是無壓縮的。那麼大的圖，嘖嘖。而矢量圖在輸入時根本不需要采樣和量化，最重要的是，減少了文件請求，渲染幾乎是無延時的。這就節省了一部分時間，直接起飛~大眾點評詳情頁基本所有的大小數字都是svg做的，也是...離譜！
不管是單一的說圖片，還是說頁面、css的優化。最主要的無非：「跳過」CPU或GPU介入。在游戲中大放光彩的「紋理壓縮技術」其優勢之一就是「無需CPU解碼能夠直接被GPU讀取和渲染」！
倒是font-face不能濫用。瀏覽器對於這種「利器」的載入策略也不是完全放手的那種。瀏覽器載入WebFonts時按順序會有三個時期：
阻塞期（BlockPeriod）。在此期間如果字體沒有載入完成，那麼瀏覽器會使用font-family指定的字體列表中的後備字體（Fallback）進行渲染，但是顯示為空白，也就是對於用戶是不可見的。在此期間字體載入完成之後才能正常顯示該字體
交換期（SwapPeriod）。跟阻塞期類似，但是在這個時期內，它會在字體載入時，先用後備字體渲染文本並顯示出來（而不是顯示空白），在此期間字體載入完成之後才能正常的顯示該字體
失敗期（FailurePeriod）。如果字體載入失敗，則使用後備字體顯示文本
雖說可以用font-display跳過阻塞期（swap值），但終究是「後置改變」的。如果碰上很拉胯的網路又沒有做好前置處理，就很糟糕。