資訊專欄INFORMATION COLUMN
摘要：字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。推薦網(wǎng)站字庫成立于年，推出的第一個自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。這個字體圖標(biāo)可以在下免費使用。
1.字體格式
不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。
1、TureType(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+ iOS Mobile、Safari4.2+; 2、OpenType(.otf)格式 .otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+.Opera10.0+、iOS Mobile、Safari4.2+; 3、Web Open Font Format(.woff)格式 woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有IE9+. Firefox3.5+、Chrome6+、Safari3.6+Opera11.1+; 4、Embedded Open Type(.eot)格式 .eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+; 5、SVG(.svg)格式 .svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+; 了解了上面的知識后，我們就需要為不同的瀏覽器準(zhǔn)備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。
2.字體圖標(biāo)
圖片是有諸多優(yōu)點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網(wǎng)頁的性能的。更重要 的是圖片不能很好的進(jìn)行“縮放”，因為圖片放大和 縮 小會失真。 移動端響應(yīng)式，很多情況下希望我們的圖標(biāo)是可以縮放的。此時一個非常重要的技術(shù)出現(xiàn)了，額不是出現(xiàn)了，是以前就有，是被從新"寵幸"啦。這就是字體圖標(biāo)(iconfont). 字體圖標(biāo)優(yōu)點 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉(zhuǎn)度，等..但是本質(zhì)其實是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果等等.. . 本身體積更小，但攜帶的信息并沒有削減。 幾乎支持所有的瀏覽器 移動端設(shè)備必備良藥...
3.字體圖標(biāo)使用流程
1.設(shè)計字體圖標(biāo) 假如圖標(biāo)是我們公司多帶帶設(shè)計，那就需要第一步了，這個屬于UI設(shè)計人員的工作， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標(biāo)， 比如下圖： 之后保存為svg格式，然后給我們前端人員就好了。 其實第一步，我們不需要關(guān)心，只需要給我們這些圖標(biāo)就可以了，如果圖標(biāo)是大眾的，網(wǎng)上本來就有的，可以直接跳過第一步，進(jìn)入第三步。 2.上傳生成字體包 當(dāng)UI設(shè)計人員給我們svg文件的時候，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。 推薦網(wǎng)站： http://icomoon.io **icomoon字庫** IcoMoon成立于2011年，推出的第一個自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。 內(nèi)容種類繁多，非常全面,唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。 **阿里icon font字庫** http://www.iconfont.cn/ 這個是阿里M2UX的一個icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里圖標(biāo)庫?？梢允褂肁I制作圖標(biāo)上傳生成。 一個字，免費，免費!! **fontello** [http://fontello.com/](http://fontello.com/) 在線定制你自己的icon font字體圖標(biāo)字庫，也可以直接從GitHub下載整個圖標(biāo)集，該項目也是開源的。 **Font-Awesome** [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) 這是我最喜歡的字庫之一了，更新比較快。目前已經(jīng)有369個圖標(biāo)了。 **Glyphicon Halflings** [http://glyphicons.com/](http://glyphicons.com/) 這個字體圖標(biāo)可以在Bootstrap下免費使用。自帶了200多個圖標(biāo)。 **Icons8** [https://icons8.com/](https://icons8.com/) 提供PNG免費下載，像素大能到500PX
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/966.html
摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時需要格式的字體。不單止可以轉(zhuǎn)換格式同時支持中文，還可以提取字體，并且有更快的上傳和轉(zhuǎn)換速度。擁有的所有功能，并且在線即可用。 關(guān)于@font-face @font-face是CSS3中的一個模塊，使用 @font-face 可以自定義網(wǎng)頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @font-face 呢？你可能見過類似下面的代碼片...
摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時需要格式的字體。不單止可以轉(zhuǎn)換格式同時支持中文，還可以提取字體，并且有更快的上傳和轉(zhuǎn)換速度。擁有的所有功能，并且在線即可用。 關(guān)于@font-face @font-face是CSS3中的一個模塊，使用 @font-face 可以自定義網(wǎng)頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @font-face 呢？你可能見過類似下面的代碼片...
摘要：字體的初探一，字體基本概念的介紹字體的分類襯線體襯線在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細(xì)豎粗，開始和結(jié)束的地方有裝飾。無論是還是下，不指定網(wǎng)頁的中文字體時，默認(rèn)的就是宋體。 Web字體的初探 一，字體基本概念的介紹 1.1 字體的分類 1.1.1 Serif（襯線體） Serif（襯線）：在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細(xì)豎粗，開始和結(jié)束...
摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個HTML頁面中最好只使用一個標(biāo)題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...
摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個HTML頁面中最好只使用一個標(biāo)題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...
閱讀 740·2023-04-25 19:43
閱讀 3986·2021-11-30 14:52
閱讀 3816·2021-11-30 14:52
閱讀 3873·2021-11-29 11:00
閱讀 3809·2021-11-29 11:00
閱讀 3907·2021-11-29 11:00
閱讀 3584·2021-11-29 11:00
閱讀 6197·2021-11-29 11:00
