成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

把圖標(biāo)轉(zhuǎn)成web字體

wua_wua2012 / 2236人閱讀

摘要：這章要說的是如何把自己設(shè)計(jì)的轉(zhuǎn)成，在網(wǎng)頁上使用字體圖標(biāo)除了圖像清晰度之外，主要還是清晰度，特別是用于手機(jī)上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應(yīng)處理。

對字體大家一定不陌生
一般使用Font-family: Georgia, SimSun, “宋體”設(shè)置字體。字體主要使用兩種:襯線和非襯線，但這不是我們這章的主要內(nèi)容。
這章要說的是如何把自己設(shè)計(jì)的icon轉(zhuǎn)成font，在網(wǎng)頁上使用！

字體圖標(biāo)除了圖像清晰度之外，主要還是清晰度，特別是用于手機(jī)上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應(yīng)處理。其次是靈活度，使用字體圖標(biāo)可以隨意設(shè)置大小和顏色，不用因?yàn)橐稽c(diǎn)不一樣又重新切圖。

兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，如果只是手機(jī)上使用可以使用woff格式就可以了。特別注意，如果引入字體不在同一個(gè)域名下是會出現(xiàn)跨域的，無法下載字體。設(shè)置CORS做處理能兼容到ie7。

1,在這里要使用到一個(gè)編輯字體的軟件FontForgeBuilds，下載地址：網(wǎng)下找一個(gè)好了

2,安裝完打開之后選擇一個(gè)字體，或者新建一個(gè)字體：

可以看到這是已經(jīng)有字的字體

3,選擇一個(gè)空的，右鍵New Outline Window打開這個(gè)字的路徑，把我們事先準(zhǔn)備好的icon的帶路徑的svg（這個(gè)可以找UI小姐姐幫忙導(dǎo)一個(gè)，ai畫好icon后路徑輪廓化描邊導(dǎo)出svg就可以用） 從File處Import進(jìn)來，調(diào)整一下位置，可以在字體那頁看到這個(gè)icon的顯示位置

4,回到字體頁，右鍵該字，選擇Glyph Info修改name和value值，value值用于在頁面上顯示

5,生成字體，從File處Generate Fonts，選擇要生成的字體格式，和存放的位置，確定后點(diǎn)擊Generate ，接下來會彈出錯(cuò)信息但不要管它，直接Generate。

6,使用為剛剛編輯的那個(gè)字的標(biāo)識



123456

我們剛剛導(dǎo)入的那個(gè)搜索icon就出來了：

感覺牛X轟轟，我都被自己征服

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112101.html

相關(guān)文章

  • css可變色圖標(biāo)及原理分析

    摘要：只是，僅支持這一種格式是專門為開發(fā)而設(shè)計(jì)的字體，其字體尺寸更小，加載更快，應(yīng)該優(yōu)先使用。字體圖標(biāo)技術(shù)的實(shí)現(xiàn)就是把通常的字符集映射成了另外的圖標(biāo)形狀例如把映射成了 本文的目標(biāo)是：使用css可以控制圖標(biāo)的顏色，大小需要工具：png轉(zhuǎn)svg工具(如果ui給的svg就更好了) iconfont(圖標(biāo)轉(zhuǎn)代碼) 第一步，把圖標(biāo)轉(zhuǎn)成svg格式的 打開網(wǎng)址 https://www.bejso...

    RebeccaZhong 評論0 收藏0

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評論0 收藏0

  • 字體圖標(biāo)的使用

    摘要：字體圖標(biāo)的不足既然字體圖標(biāo)那么有效率，那么為什么不都使用字體圖標(biāo)呢現(xiàn)在的限制主要是字體圖標(biāo)的開發(fā)要求比較高，畢竟是開發(fā)一種字體。自己開發(fā)字體圖標(biāo)很累，幸好有很多樂于分享的，現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來。目錄 字體圖標(biāo)的介紹 iconfont的使用 基于unicode的用法： ...

    shuibo 評論0 收藏0

  • FE.WX-小程序“無聊廣場”游戲前端性能優(yōu)化與踩坑攻略

    摘要：本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對小程序中的動畫音頻等踩坑做出解決方案。 背景 一個(gè)交互不復(fù)雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對...

    qpal 評論0 收藏0

  • SVG vs Image, SVG vs Iconfont

    摘要：結(jié)論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結(jié)論選擇或許是一個(gè)不錯(cuò)地選擇去替代的使用方式。 這可能是個(gè)別人寫過很多次的話題，但貌似由于兼容性的原因？圖標(biāo)的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導(dǎo)一下問題。 SVG vs I...

    kel 評論0 收藏0

發(fā)表評論

0條評論

wua_wua2012

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<