web字體

番茄西紅柿發布于2019-04-22 19:50 / 1179人閱讀

摘要：字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。推薦網站字庫成立于年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。這個字體圖標可以在下免費使用。

1.字體格式

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。

1、TureType(.ttf)格式

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+ iOS Mobile、Safari4.2+; 2、OpenType(.otf)格式　　.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+.Opera10.0+、iOS Mobile、Safari4.2+; 3、Web Open Font Format(.woff)格式　　 woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+. Firefox3.5+、Chrome6+、Safari3.6+Opera11.1+; 4、Embedded Open Type(.eot)格式　　 .eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+; 5、SVG(.svg)格式　.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+; 了解了上面的知識后，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區別差異。

2.字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。這就是字體圖標(iconfont). 　　字體圖標優點　　　　可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等.. . 　　本身體積更小，但攜帶的信息并沒有削減。　　幾乎支持所有的瀏覽器　　移動端設備必備良藥...

3.字體圖標使用流程

1.設計字體圖標假如圖標是我們公司多帶帶設計，那就需要第一步了，這個屬于UI設計人員的工作，他們在 illustrator 或 Sketch 這類矢量圖形軟件里創建 icon圖標，比如下圖：之后保存為svg格式，然后給我們前端人員就好了。其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。 2.上傳生成字體包　　當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。　　推薦網站： http://icomoon.io **icomoon字庫** IcoMoon成立于2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面,唯一的遺憾是國外服務器，打開網速較慢。 **阿里icon font字庫** http://www.iconfont.cn/ 這個是阿里M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里圖標庫。可以使用AI制作圖標上傳生成。一個字，免費，免費!! **fontello** [http://fontello.com/](http://fontello.com/) 在線定制你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。 **Font-Awesome** [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) 這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。 **Glyphicon Halflings** [http://glyphicons.com/](http://glyphicons.com/) 這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。 **Icons8** [https://icons8.com/](https://icons8.com/) 提供PNG免費下載，像素大能到500PX

云服務器 GPU云服務器免費字體添加字體系統字體小字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/966.html

Web-Fontmin -- 在線提取你需要的字體

摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時需要格式的字體。不單止可以轉換格式同時支持中文，還可以提取字體，并且有更快的上傳和轉換速度。擁有的所有功能，并且在線即可用。關于@font-face @font-face是CSS3中的一個模塊，使用 @font-face 可以自定義網頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @font-face 呢？你可能見過類似下面的代碼片...

ephererid 2019-08-19 17:51 評論0 收藏1
Web-Fontmin -- 在線提取你需要的字體

摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時需要格式的字體。不單止可以轉換格式同時支持中文，還可以提取字體，并且有更快的上傳和轉換速度。擁有的所有功能，并且在線即可用。關于@font-face @font-face是CSS3中的一個模塊，使用 @font-face 可以自定義網頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @font-face 呢？你可能見過類似下面的代碼片...

derek_334892 2019-08-30 12:52 評論0 收藏0
Web字體的初探

摘要：字體的初探一，字體基本概念的介紹字體的分類襯線體襯線在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細豎粗，開始和結束的地方有裝飾。無論是還是下，不指定網頁的中文字體時，默認的就是宋體。 Web字體的初探一，字體基本概念的介紹 1.1 字體的分類 1.1.1 Serif（襯線體） Serif（襯線）：在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細豎粗，開始和結束...

luckyyulin 2019-08-01 14:53 評論0 收藏0
HTML與CSS中的文本個人分享

摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最文本標題元素注意: 在一個HTML頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 評論0 收藏0
HTML與CSS中的文本個人分享

摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最文本標題元素注意: 在一個HTML頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 評論0 收藏0