亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

設(shè)計(jì)師的春天：中文WebFont解決方案Font-Spider(字蛛)

dreambei / 3243人閱讀

摘要：針對(duì)以上的問(wèn)題，我們可以得出中文要解決的問(wèn)題是壓縮和轉(zhuǎn)碼。主頁(yè)中文字體演示與工具使用請(qǐng)前往主頁(yè)項(xiàng)目實(shí)踐年接到的最后一個(gè)項(xiàng)目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡(jiǎn)潔大氣。

我們?cè)谌粘Ｐ枨笾校?jīng)常會(huì)碰到視覺(jué)設(shè)計(jì)師對(duì)某個(gè)中文字體效果非常堅(jiān)持的情況，因?yàn)轫?yè)面是否高大上，字體選擇是很重要的一個(gè)因素，選擇合適的字體可以讓頁(yè)面更優(yōu)雅。面對(duì)這種問(wèn)題，我們通常以下方式來(lái)進(jìn)行設(shè)計(jì)還原：

使用圖片背景還原設(shè)計(jì)，即使用 photoshop 將文本圖層多帶帶導(dǎo)出成網(wǎng)頁(yè)背景圖片。

產(chǎn)生的問(wèn)題

制作與維護(hù)成本很高。切圖繁瑣、高清屏適配繁瑣、合并雪碧圖更繁瑣，后期修改更加繁瑣。

用戶(hù)體驗(yàn)差。導(dǎo)致網(wǎng)頁(yè)不支持選中、復(fù)制、搜索、翻譯、矢量縮放，也會(huì)影響視障用戶(hù)使用讀屏器操作網(wǎng)頁(yè)。

帶來(lái)更多帶寬消耗。導(dǎo)出的圖片體積隨著文本面積增加，且字形無(wú)法重復(fù)利用，這消耗著大量的服務(wù)器資源

WebFont技術(shù)提供了在網(wǎng)頁(yè)使用特殊字體的可能，從而避免用圖片的方法。它的實(shí)現(xiàn)方法是通過(guò)CSS的@font-face引入字體。很多互聯(lián)網(wǎng)公司已經(jīng)率先采用了這種方法，比如Apple官網(wǎng)就是采用了自己的字體。Google也推出了免費(fèi)的WebFont云托管服務(wù)，在國(guó)外網(wǎng)站自定義字體得到很好的應(yīng)用。

在中文方面自定義字體卻遲遲沒(méi)有廣泛應(yīng)用，這是有什么原因呢？

中文WebFont的困境： 中文字體體積大

英文字體文字部分由26個(gè)字母組成，所以字體文件通常不會(huì)太大；而中文漢字?jǐn)?shù)量總共約有九萬(wàn)左右， 國(guó)標(biāo)(GB)字庫(kù) 有6763字, 而根據(jù)《現(xiàn)代漢語(yǔ)常用字表》統(tǒng)計(jì)數(shù)據(jù)，常用漢字也要有3500個(gè)左右。 中文字體文件通常都會(huì)幾M的大小，參照現(xiàn)在中國(guó)的網(wǎng)絡(luò)環(huán)境，顯然不適合在項(xiàng)目中使用。

瀏覽器支持

不同瀏覽器對(duì)字體的支持也是不同的，沒(méi)有一種可以支持所有瀏覽器的字體，這就要求我們針對(duì)不同的瀏覽器制作不同的字體。(N=Not supported, P=Partial support, Y=Supported)

針對(duì)以上的問(wèn)題，我們可以得出中文WebFont要解決的問(wèn)題是：壓縮和轉(zhuǎn)碼。

Font-Spider中文WebFont解決方案的誕生：

為了不讓工程與體驗(yàn)制約著設(shè)計(jì)師對(duì)字體選擇以及創(chuàng)意的實(shí)現(xiàn)，我們利用業(yè)余時(shí)間解決了中文WebFont的兩大問(wèn)題即壓縮和轉(zhuǎn)碼，于是便有了 Font-Spider （字蛛）的誕生。作為業(yè)界首款中文 WebFont 本地自動(dòng)化壓縮與轉(zhuǎn)碼工具，中文字體 web 化問(wèn)題迎刃而解。它是一個(gè) web 字體工具，通過(guò)自動(dòng)化技術(shù)來(lái)壓縮、轉(zhuǎn)碼跨平臺(tái)的中文字體，讓網(wǎng)頁(yè)自由嵌入中文字體成為可能。

原理

爬行本地 html 文檔，分析所有 css 語(yǔ)句

記錄@font-face語(yǔ)句聲明的字體，并且記錄使用該字體的 css 選擇器

通過(guò) css 選擇器的規(guī)則查找當(dāng)前 html 文檔的節(jié)點(diǎn)，記錄節(jié)點(diǎn)上的文本

找到字體文件并刪除沒(méi)被使用的字符

編碼成跨平臺(tái)使用的字體格式

編碼零干預(yù)

不需要改變 web 工程師現(xiàn)有的編碼習(xí)慣、工程師可直接通過(guò) css @font-face與選擇器定義并應(yīng)用字體。

壓縮與轉(zhuǎn)碼

剔除沒(méi)有使用的字符，通?？蓪?shù) MB 的字體壓縮成數(shù)十 KB 大小，解決中文字體過(guò)大的問(wèn)題，并編碼成跨平臺(tái)兼容的格式。

主頁(yè)

web 中文字體演示與工具使用請(qǐng)前往主頁(yè)：http://font-spider.org/

項(xiàng)目實(shí)踐

2014年接到的最后一個(gè)項(xiàng)目需求——騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡(jiǎn)潔大氣。標(biāo)題部分字體更是采用了Adobe與Google所領(lǐng)導(dǎo)開(kāi)發(fā)的開(kāi)源字體——思源字體。面對(duì)項(xiàng)目中特殊字體的需求，快速整理了實(shí)現(xiàn)方案。騰訊云線上的解決方案已經(jīng)采用了思源的特殊字體。

開(kāi)源

我們把Font-Spider（字蛛）不斷完善，并且回饋給開(kāi)源社區(qū)，希望為中文WebFont的發(fā)展出一份力，讓更多的中文站點(diǎn)可以使用精美的字體。

本文轉(zhuǎn)載自 https://isux.tencent.com/font...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112260.html

相關(guān)文章

  • 字蛛的使用及說(shuō)明

    摘要：字蛛通過(guò)分析本地與文件獲取中沒(méi)有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過(guò)高，我使用的版本沒(méi)有成功，后來(lái)改成的版本成功了。 web字體體積大導(dǎo)致加載過(guò)慢，對(duì)于前端來(lái)說(shuō)是一大需要解決的問(wèn)題，作為一個(gè)前端小白，看不懂文檔也是個(gè)通病，不過(guò)還是花了一些時(shí)間和朋友一起研究了這個(gè)問(wèn)題，并找到了解決方案就是字蛛。 字蛛網(wǎng)站：http://...

    RdouTyping 評(píng)論0 收藏0

  • 字蛛的使用及說(shuō)明

    摘要：字蛛通過(guò)分析本地與文件獲取中沒(méi)有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過(guò)高，我使用的版本沒(méi)有成功，后來(lái)改成的版本成功了。 web字體體積大導(dǎo)致加載過(guò)慢，對(duì)于前端來(lái)說(shuō)是一大需要解決的問(wèn)題，作為一個(gè)前端小白，看不懂文檔也是個(gè)通病，不過(guò)還是花了一些時(shí)間和朋友一起研究了這個(gè)問(wèn)題，并找到了解決方案就是字蛛。 字蛛網(wǎng)站：http://...

    Joonas 評(píng)論0 收藏0

  • 字蛛font-spider報(bào)錯(cuò),<web font not found>,碰到的最新問(wèn)題

    摘要：的問(wèn)題沒(méi)碰到但是我的卻一直報(bào)錯(cuò)后來(lái)把樣式表里的文件全部刪除居然好用了然后逐類(lèi)刪除逐行刪除發(fā)現(xiàn)問(wèn)題在問(wèn)題在于中的無(wú)法解析并找不到字體刪除就可以執(zhí)行了執(zhí)行完畢再還原回來(lái)完美解決 @media的問(wèn)題沒(méi)碰到,但是我的卻一直報(bào)錯(cuò).后來(lái)把樣式表里的文件全部刪除,居然好用了.然后逐類(lèi)刪除,逐行刪除,發(fā)現(xiàn)問(wèn)題在 .clearfix:after{content: 20;display: block;vi...

    starsfun 評(píng)論0 收藏0

  • 字蛛font-spider報(bào)錯(cuò),<web font not found>,碰到的最新問(wèn)題

    摘要：的問(wèn)題沒(méi)碰到但是我的卻一直報(bào)錯(cuò)后來(lái)把樣式表里的文件全部刪除居然好用了然后逐類(lèi)刪除逐行刪除發(fā)現(xiàn)問(wèn)題在問(wèn)題在于中的無(wú)法解析并找不到字體刪除就可以執(zhí)行了執(zhí)行完畢再還原回來(lái)完美解決 @media的問(wèn)題沒(méi)碰到,但是我的卻一直報(bào)錯(cuò).后來(lái)把樣式表里的文件全部刪除,居然好用了.然后逐類(lèi)刪除,逐行刪除,發(fā)現(xiàn)問(wèn)題在 .clearfix:after{content: 20;display: block;vi...

    yvonne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<