04-移動端開發教程-線上字型圖示

aicoder發表於2017-12-28

在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提供的樣式型別

<!-- 引用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線上字型應用

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/

聯絡老馬

對應視訊地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼

掃碼加老馬微信


相關文章