您現在的位置是:電腦技術吧?>? 組裝維修 ??>??iconfont,iconfont怎么用??>??正文詳情

iconfont,iconfont怎么用

是憶文2019-11-26 09:01:39 人圍觀
簡介iconfontcdn因為移動設備有不同的分辨率、PPI等問題,所以經常需要針對不同的屏幕分辨率進行調整和優化,比如使用@2x圖片、最大寬度限制等使用[email protected] face來顯示icon卡

由于移動端設備擁有不同分辨率,PPI 等引起的問題, 常常需要針對不同屏幕分辨率來調整優化,如使用 @2x 圖片, max-width 限制等。

  采用 css @font-face 用來顯示 icon 也不失為一種好辦法。

  因為 icon fonts (字體)是矢量圖形,所以不受分辨率的影響,同時可以做到完美縮放;當然,也可使用在 WEB 端。

  優點  文件小  加載性能好  支持 css 樣式  IE6/7 下也支持  缺點  樣式限制,使用扁平化風格  移動端還存在不兼容問題  少量移動設備和 icon fonts 字符編碼沖突  FF和 IE9 下跨域問題  性能問題  使用方法  制作字體文件  可以利用字體工具手動制作  也可以利用在線工具自動生成  在 css 中引用,如下  引入字體文件  CSS Code復制內容到剪貼板  @font-face {font-family: 'iconfont';  src: url('iconfont.eot'); /* IE9*/  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('iconfont.woff') format('woff'), /* chrome、firefox */  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2 */  url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */  }  再定義一個 icon-* 通配我們所有圖標的共有 CSS 樣式,  CSS Code復制內容到剪貼板  [class^=icon-], [class*= icon-] {  display: inline-block;  speak: none  font-family: iconfont;  font-size: 16px;  line-height: 1;  font-style: normal;  /** 字體圖標出現鋸齒的問題: */  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  }  最后是利用 :before 來注入每個 icon 對應的字體編碼  CSS Code復制內容到剪貼板  .icon-bell:before {  content: 03432;  }  .icon-search:before {  content: 03433;  }

版權聲明:本文由 是憶文 整理編輯。

原標題:icon,iconfont是什么

轉載注明出處:http://www.dn9ww09s.icu/assemble/14404.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 愛剪輯音頻導入,愛剪輯怎么去音頻

    愛剪輯音頻導入,愛剪輯怎么去音頻 相關圖片愛剪輯如何合成音頻愛情剪輯是一個非常有用的視頻剪輯工具。當我們剪輯視頻時,我們可以將音頻添加到視頻中,使其更加有趣。你知道,正確的音頻或背景音樂可以為小視頻添加很...

  • python的floor,python中floor函數

    python的floor,python中floor函數 相關圖片python的str本文主要介紹了Python通過floor函數舍棄小數點的方法,并結合實例分析了floor函數在Python中的作用和使用技巧。可以參考下面的示例來描述Pythoshape python...

  • 拼多多隨意取消訂單,拼拼多多怎樣取消訂單

    拼多多隨意取消訂單,拼拼多多怎樣取消訂單 相關圖片京東取消訂單當我們團購品多多時,有時因為信息錯誤或其他原因,怎么能取消訂單呢?如果你不知道如何取消訂單,讓我們看看超人小編提供的拼圖滴滴雙方都不取消訂單...

  • 上傳到空間的視頻怎么保存,上傳到qq空間的視頻保存

    上傳到空間的視頻怎么保存,上傳到qq空間的視頻保存 相關圖片扣扣空間轉發的視頻怎么保存當我們使用DW來建立一個站點時,我們基本上會使用FTP工具,然后在本地計算機上使用DW,所以出現了一個問題。當我們修改一個文件時,需要通過FTP軟件把...

  • xp系統遠程桌面連接在哪里,怎么連接遠程桌面

    xp系統遠程桌面連接在哪里,怎么連接遠程桌面 相關圖片xp遠程桌面連接在哪里我們不得不說微軟的產品非常人性化,比如遠程桌面控制。但最近不少win10系統用戶表示,在使用遠程桌面控制時,總會遇到遠程桌面無法連接的情況。所以,見面...

  • 重置出現問題,重置

    重置出現問題,重置 相關圖片時間重置Dreamweaver CS 4 在初始安裝的時候,會彈出個如下的對話框,想必大家都很熟悉了,在這里大家可以很方便地設置Dreamweaver CS 4 所關聯重置網絡...

  • win10更改密碼發生錯誤,win10出現錯誤重新啟動

    win10更改密碼發生錯誤,win10出現錯誤重新啟動 相關圖片win10開機密碼自上個月以來,微軟一直不太順利。win10系統的用戶最近報告,在啟動運行一段時間后,會自動彈出JS腳本錯誤提示。我相信很多朋友都遇到過這個問題。別擔心,超人win1...

  • 同心卡套餐,移動同心卡套餐

    同心卡套餐,移動同心卡套餐 相關圖片移動同心卡副卡套餐4G給我們帶來了更加便捷的網絡生活,同時,我們的手機流量也在急速上升,如果我們不小心的話,手機流量會超負荷。最近移動推出了同心卡套餐。該包包含多個優...

  • 悅動圈怎樣看運動軌跡,悅動圈在哪里看運動軌跡

    悅動圈怎樣看運動軌跡,悅動圈在哪里看運動軌跡 相關圖片悅動圈 悅跑圈隨著人們對健康的關注,健身已經越來越成為人們生活的核心。也許你經常在朋友圈里看到悅悅跑步圈記錄的運動數據和軌跡。如何得到悅悅跑圈的跑步軌跡?讓我們看看...

  • 炫光效果怎么做,炫光效果

    炫光效果怎么做,炫光效果 相關圖片炫光反應最終效果:1。新畫布600400,填充黑色2。設置畫筆的大小,軟化邊緣,并使用畫筆工具在畫布上繪制,如圖3所示。剛才在圖上做運動模糊,設置角度90,距離100,抑制炫光...

熱評文章

  • 錯誤0x8007045d,錯誤0x0000709

    錯誤0x8007045d,錯誤0x0000709 相關圖片0x80004005錯誤原因據超人小編介紹,雖然從win 10官方10240升級到win 10 Th2官方的安裝方法比其他升級容易,但并不意味著每個人在升級過程中都有問題。近日,有網友問小錯誤代碼0xc000000...

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常實用的購物軟件。在這個軟件中,用戶有機會花一點錢,得到好的產品,但不可避免的是讓人們懷疑產品的質量。那么幸運戰利品真的能贏嗎?...

  • image data,image轉data

    image data,image轉data 相關圖片no image將圖像資源轉換為Base64字符串格式并將其嵌入頁面或樣式中。這樣,甚至保存了圖像請求鏈接,例如:使用CSS代碼將內容復制到剪貼板/**數據格式**/data:base64轉formdata...

  • win7IP地址,win7哪里看ip地址

    win7IP地址,win7哪里看ip地址 相關圖片win7電腦ip地址在哪看在Internet上沖浪時,您一定遇到了由于IP地址沖突而無法鏈接網絡的問題。除了Windows 7系統和Windows xp系統炫目的界面、跳轉列表等功能外,如何更改電腦ip地址 win7...

  • 知乎怎么發表文章不被刪除,知乎怎么發表內容

    知乎怎么發表文章不被刪除,知乎怎么發表內容 相關圖片為什么在知乎上發文章老被刪智虎是一款非常實用的閱讀和學習軟件。在這個軟件中,用戶可以閱讀許多高質量的文章。那么如何發表文章呢?接下來,超人軟件編輯將介紹智虎iPhone上...

  • 輸入法圖標不見了怎么辦,輸入法不見了

    輸入法圖標不見了怎么辦,輸入法不見了 相關圖片電腦右下角輸入法圖標不見了最近,有人問超人,當電腦的輸入法圖標突然消失時,如何恢復。超人收集了一些解決方案。如果其他車主也遇到相關問題,可以和超人一起看一下教程打...

  • 字體尺寸對照表,ps查看字體實際尺寸

    字體尺寸對照表,ps查看字體實際尺寸 相關圖片6號字體多大CSS中的常用單位可以用多種不同的方式設置字體大小。一般來說,這些單位分為絕對單位和相對單位兩大類,在大多數情況下,絕對單位是相對于某些實際測量值的固定值,...

  • win7開機輸入法不啟動,win7任務欄沒有輸入法

    win7開機輸入法不啟動,win7任務欄沒有輸入法 相關圖片win7沒有輸入法語言欄了雖然win10系統已經發布了很長一段時間,但是很多用戶仍然使用win7系統。當然,win7系統在使用過程中總會遇到一些小問題。例如,在win7系統上電后,輸入方win7自...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛士是一款用于學校和家長雙向交流的學習軟件。在這里,你不僅可以檢查你的學習成績,還可以了解學校的一些情況。那么世紀衛士的查詢結果在哪里呢?編...

  • 3D圖形,3d圖形怎么做

    3D圖形,3d圖形怎么做 相關圖片3D繪圖它已經玩了兩三個星期了。它就像玩扁平的東西,所以它開始拋3D,因為帆布畫布仍然是平的,畢竟我們需要抽象一個Z軸有三維,然后三維坐標轉換成二維坐標,畫在畫布上,三...

關注微信

变脸官网查询