在線字體圖標

做者聲明：本博客中所寫的文章，都是博主自學過程的筆記，參考了不少的學習資料，學習資料和筆記會註明出處，全部的內容都以交流學習爲主。有不正確的地方，歡迎批評指正

在線字體圖標

在IE4開始微軟就已經開始支持在線字體，不過沒有流行起來，直到CSS3新增長了font-face模塊，正式歸入了web開發的標準。也漸漸流行起來並且發掘了不少其餘應用。

1. 爲何要用在線字體

問題

1. 精靈圖（雪碧圖）用做背景的時候不能輕易的放大縮小。
2. 低質量的位圖在高清設備上放大後會有難看的鋸齒，沒法知足響應式頁面的開發需求

在線字體帶來的革命：

1. 在線字體本質就是文字，可是也但是像圖形的文字。節省了帶寬（相比圖片）字體文件大小也不大（通常幾百k）。
2. 在線字體自己是矢量的，放大縮小都不會失真
3. 能夠靈活的經過css來控制字體圖標的大小、顏色、陰影等
4. 能夠方便的自定義字體圖標

2. 在線字體

@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，容許咱們不依賴操做系統的字體，作到全平臺字體統一和定製。

語法規則：

@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

 

取值說明：

1. YourWebFontName:此值指的就是你自定義的字體名稱，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」
2. source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；
3. format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4. weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式。

3.字體類型

不一樣的瀏覽器對字體格式支持是不一致的，如下是各類類型的字體的介紹。

• TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

• OpenType(.otf)格式：

.otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

• Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

• Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；

• SVG(.svg)格式：

.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味着在@font-face中咱們至少須要.woff,.eot兩種格式字體，甚至還須要.svg等字體達到更多種瀏覽版本的支持。

4. 字體兼容寫法

@font-face {
  font-family: 'YourWebFontName';
  src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
  src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
            url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
            url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

h1 { font-family: 'YourWebFontName' }

 

4. bootstrap在線字體應用

bootstrap下載：http://www.bootcss.com/

在線圖標使用：https://v3.bootcss.com/components/

學習視頻：https://ke.qq.com/webcourse/index.html#cid=265818&term_id=100313463&taid=1680594933386842&vid=h1423lk9a0r

 

第一種：直接應用bootstrap提供的樣式類型

<!-- 引用bootstrap樣式文件 -->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div>
  <!-- 在須要字體圖標的地方添加i標籤，並添加圖標樣式類 -->
  <i class="glyphicon glyphicon-eur"></i>
</div>

 

第二種：直接下載bootstrap壓縮包。

下載地址：下載

解壓後，把字體包fonts文件加載拷貝到項目的根目錄下。

<style>
  /* 自定義在線字體，瀏覽器會自動下載下面的字體文件 */
  @font-face {
    font-family: 'glyphicons';
    src: url('./fonts/glyphicons-halflings-regular.eot');
    /* IE9 Compat Modes */
    src: url('./fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/glyphicons-halflings-regular.woff') format('woff'), /* Modern Browsers */
    url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/glyphicons-halflings-regular.svg#glyphicons') format('svg');
    /* Legacy iOS */
  }

  .hd-r {
    /* 設置字體類型 */
    font-family: 'glyphicons','Microsoft YaHei',serif;
  }
</style>
<div class="hd-r">&#x2002;  &#xe005;&#xe012;&#x2601;</div>

 

5. fontawesome在線字體應用

fontawesome下載：https://fontawesome.com/

在線圖標使用：https://fontawesome.com/icons?d=gallery

學習視頻：https://ke.qq.com/webcourse/index.html#cid=265818&term_id=100313463&taid=1680599228354138&vid=q142380zvv3

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Font Awesome 提供了高可用性的矢量圖標字體。它能夠用強大的CSS自定義圖標的大小、顏色、圖標陰影等。

使用方法以下：（很是相似bootstrap）

<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
<i class="fa fa-camera-retro"></i>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
<i class="fa fa-refresh fa-spin fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>

 

6. 自定義字體在線工具

有不少能夠直接在線編輯和上傳自定義字體的工具和網站。其中：icomoon就是比較經常使用的一個在線製做字體的網站。有不少免費的字體能夠用，並且能夠在線編輯和上傳。

 

 

此在線工具能夠選擇圖標、增長圖標、修改圖標、移動圖標、上傳圖標等操做，操做完成後選擇要下載的圖標而後選擇右下角的生成字體，而後就能夠下載字體了。

字體下載下來後，能夠直接用它提供的字體文件和樣式類型文件。

其餘：

定製自已的字體圖標庫

http://iconfont.cn/

文章參考來源
做者：IT老馬
連接： https://www.jianshu.com/p/13f11e7cccaa