資訊專欄INFORMATION COLUMN
摘要：針對以上的問題，我們可以得出中文要解決的問題是壓縮和轉碼。主頁中文字體演示與工具使用請前往主頁項目實踐年接到的最后一個項目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡潔大氣。
我們在日常需求中，經常會碰到視覺設計師對某個中文字體效果非常堅持的情況，因為頁面是否高大上，字體選擇是很重要的一個因素，選擇合適的字體可以讓頁面更優雅。面對這種問題，我們通常以下方式來進行設計還原：
使用圖片背景還原設計，即使用 photoshop 將文本圖層多帶帶導出成網頁背景圖片。
產生的問題制作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合并雪碧圖更繁瑣，后期修改更加繁瑣。
用戶體驗差。導致網頁不支持選中、復制、搜索、翻譯、矢量縮放，也會影響視障用戶使用讀屏器操作網頁。
帶來更多帶寬消耗。導出的圖片體積隨著文本面積增加，且字形無法重復利用，這消耗著大量的服務器資源
WebFont技術提供了在網頁使用特殊字體的可能，從而避免用圖片的方法。它的實現方法是通過CSS的@font-face引入字體。很多互聯網公司已經率先采用了這種方法，比如Apple官網就是采用了自己的字體。Google也推出了免費的WebFont云托管服務，在國外網站自定義字體得到很好的應用。
在中文方面自定義字體卻遲遲沒有廣泛應用，這是有什么原因呢？
中文WebFont的困境： 中文字體體積大英文字體文字部分由26個字母組成，所以字體文件通常不會太大；而中文漢字數量總共約有九萬左右， 國標(GB)字庫 有6763字, 而根據《現代漢語常用字表》統計數據，常用漢字也要有3500個左右。 中文字體文件通常都會幾M的大小，參照現在中國的網絡環境，顯然不適合在項目中使用。
瀏覽器支持不同瀏覽器對字體的支持也是不同的，沒有一種可以支持所有瀏覽器的字體，這就要求我們針對不同的瀏覽器制作不同的字體。(N=Not supported, P=Partial support, Y=Supported)
針對以上的問題，我們可以得出中文WebFont要解決的問題是：壓縮和轉碼。
Font-Spider中文WebFont解決方案的誕生：為了不讓工程與體驗制約著設計師對字體選擇以及創意的實現，我們利用業余時間解決了中文WebFont的兩大問題即壓縮和轉碼，于是便有了 Font-Spider （字蛛）的誕生。作為業界首款中文 WebFont 本地自動化壓縮與轉碼工具，中文字體 web 化問題迎刃而解。它是一個 web 字體工具，通過自動化技術來壓縮、轉碼跨平臺的中文字體，讓網頁自由嵌入中文字體成為可能。
原理爬行本地 html 文檔，分析所有 css 語句
記錄@font-face語句聲明的字體，并且記錄使用該字體的 css 選擇器
通過 css 選擇器的規則查找當前 html 文檔的節點，記錄節點上的文本
找到字體文件并刪除沒被使用的字符
編碼成跨平臺使用的字體格式
編碼零干預不需要改變 web 工程師現有的編碼習慣、工程師可直接通過 css @font-face與選擇器定義并應用字體。
壓縮與轉碼剔除沒有使用的字符，通常可將數 MB 的字體壓縮成數十 KB 大小，解決中文字體過大的問題，并編碼成跨平臺兼容的格式。
主頁web 中文字體演示與工具使用請前往主頁：http://font-spider.org/
項目實踐2014年接到的最后一個項目需求——騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡潔大氣。標題部分字體更是采用了Adobe與Google所領導開發的開源字體——思源字體。面對項目中特殊字體的需求，快速整理了實現方案。騰訊云線上的解決方案已經采用了思源的特殊字體。
開源我們把Font-Spider（字蛛）不斷完善，并且回饋給開源社區，希望為中文WebFont的發展出一份力，讓更多的中文站點可以使用精美的字體。
本文轉載自 https://isux.tencent.com/font...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112260.html
摘要：字蛛通過分析本地與文件獲取中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過高，我使用的版本沒有成功，后來改成的版本成功了。 web字體體積大導致加載過慢，對于前端來說是一大需要解決的問題，作為一個前端小白，看不懂文檔也是個通病，不過還是花了一些時間和朋友一起研究了這個問題，并找到了解決方案就是字蛛。 字蛛網站：http://...
摘要：的問題沒碰到但是我的卻一直報錯后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發現問題在問題在于中的無法解析并找不到字體刪除就可以執行了執行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報錯.后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發現問題在 .clearfix:after{content: 20;display: block;vi...
摘要：的問題沒碰到但是我的卻一直報錯后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發現問題在問題在于中的無法解析并找不到字體刪除就可以執行了執行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報錯.后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發現問題在 .clearfix:after{content: 20;display: block;vi...
閱讀 1659·2021-11-23 10:07
閱讀 2652·2019-08-30 11:10
閱讀 2834·2019-08-29 17:08
閱讀 1777·2019-08-29 15:42
閱讀 3163·2019-08-29 12:57
閱讀 2395·2019-08-28 18:06
閱讀 3544·2019-08-27 10:56
閱讀 382·2019-08-26 11:33
