前端技術——WebFont與Sprite

時間 2019-11-12

標籤前端技術 webfont sprite 简体版

原文原文鏈接

1、WebFont

web font是應用在web中的一種字體技術，在CSS中使用font-face定義新的字體。css

咱們在文檔中顯示的字體應該在系統中能找到纔會正常顯示，好比你在word中使用了黑體字，可是將word文件發給另一我的，他的電腦上並無黑體字，此時就不能按黑體正常顯示，網頁也同樣。爲了讓網頁上能顯示本地沒有的字體咱們可使用font-face，這並非CSS3創始的一種技術，早在IE5中就實現了。html

1.一、什麼是font-face

@font-face 可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，能夠實現矢量圖標。git

微軟的IE4已是開始支持這個屬性，可是隻支持微軟自有的.eot (Embedded Open Type) 格式，而其餘瀏覽器直到如今都沒有支持這一字體格式。然而，從Safari 3.1開始，網頁重構工程師已經能夠設置.ttf(TrueType)和.otf(OpenType)兩種字體作爲自定義字體了。github

1.二、font-face優勢

可縮放性（Scalability）：
基於字體的icon是與分辨率無關並能縮放到任何想要程度的技術。你的圖標看起來絕不關心retina,HDPI,XHDPI等等屏幕，但渲染時會根據目標設備自動調整，你將有能力應對任何當下，將來，或大多數任意規格的設備web

尺寸（Size）：
裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度，使用icon font時，你不須要根據不一樣設備準備不一樣的圖片，你的APP只須要在啓動時加載一次icon font文件便可。bootstrap

可維護性（Maintainability）：
自你的icon打包進一個字體文件，在項目自始至終你僅須要維護這個單一的字體文件。
經過管理字體文件你能夠很天然的組織你的icon集合，任意的進行修改或擴展瀏覽器

可推廣性（Adoption）：
然而，應用這樣的icon fonts可能會影響你和你同事之間的工做流程，但說服讓他們採用這樣的技術也很是簡單，有數款免費或收費的工具幫你輕鬆達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平臺、瀏覽器或操做系統
靈活性（Flexibility）：
應用icon fonts技術中最有意義的一項能力是能夠操縱icon fonts，改變顏色，大小，僅僅幾行代碼就能夠在瞬間改變外觀
可交互性(Interactivity)：
因爲靈活性以及可以經過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，經過應用icon fonts技術，你能輕鬆的在不一樣狀態顯示對應的不一樣效果，建立動畫。服務器

1.三、字體格式

1.3.一、TureType(.ttf)格式：
.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
1.3.二、OpenType(.otf)格式：
.otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
1.3.三、Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
1.3.四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；
1.3.五、SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這就意味着在@font-face中咱們至少須要.woff,.eot兩種格式字體，甚至還須要.svg等字體達到更多種瀏覽版本的支持ide

1.四、使用@font-face

@font-face {
font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>];
}
一、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」
二、source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；
三、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
四、weight和style:weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。svg

1.4.一、下載字體

網上有許多免費的圖標字體，能夠下載到本地，這裏到：http://fontello.com/下載字體，以下圖所示：

下載後的字體：

1.4.二、使用font-face將字體引入web中

先將字體文件複製到項目的font文件夾中，CSS樣式以下：

@font-face {
              font-family: 'iconfont';  /*字體名稱*/
              src: url('font/fontello.eot?53711433');  /*字體文件路徑*/
              src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
                   url('font/fontello.woff2?53711433') format('woff2'),
                   url('font/fontello.woff?53711433') format('woff'),
                   url('font/fontello.ttf?53711433') format('truetype'),
                   url('font/fontello.svg?53711433#fontello') format('svg');
              font-weight: normal;  /*加粗*/
              font-style: normal;  /*字形，如斜體*/
        }

1.4.三、應用字體

找到對應的字體編碼：

這裏能夠將16進制的字符編碼換算成10進制，也可使用16進制的unicode編碼不過須要x開頭，代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @font-face {
                font-family:"fontello";
                src: url('fonts/fontello.eot');
                  src: url('fonts/fontello.ttf?32435345') format('truetype'),
                  url('fonts/fontello.eot?#iefix') format('embedded-opentype');
                  
            }
            a{
                text-decoration: none;
            }
            .icon{
                font-family:'fontello';
                font-style: normal;
            }
            .icon1:before{
                content:'\e805';
            }
        </style>
    </head>
    <body>        
        <a href="#"><i class="icon">&#xe803;</i>愛心</a>        
        <a href="#"><i class="icon icon1"></i>贊</a>
    </body>
</html>

網站的font css

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?53711433');
  src: url('../font/fontello.eot?53711433#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?53711433') format('woff2'),
       url('../font/fontello.woff?53711433') format('woff'),
       url('../font/fontello.ttf?53711433') format('truetype'),
       url('../font/fontello.svg?53711433#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?53711433#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-music:before { content: '\e800'; } /* '' */
.icon-search:before { content: '\e801'; } /* '' */
.icon-mail:before { content: '\e802'; } /* '' */
.icon-heart:before { content: '\e803'; } /* '' */
.icon-star:before { content: '\e804'; } /* '' */
.icon-user:before { content: '\e805'; } /* '' */
.icon-videocam:before { content: '\e806'; } /* '' */
.icon-camera:before { content: '\e807'; } /* '' */
.icon-photo:before { content: '\e808'; } /* '' */
.icon-attach:before { content: '\e809'; } /* '' */
.icon-lock:before { content: '\e80a'; } /* '' */
.icon-eye:before { content: '\e80b'; } /* '' */
.icon-tag:before { content: '\e80c'; } /* '' */
.icon-thumbs-up:before { content: '\e80d'; } /* '' */
.icon-pencil:before { content: '\e80e'; } /* '' */
.icon-comment:before { content: '\e80f'; } /* '' */
.icon-location:before { content: '\e810'; } /* '' */
.icon-cup:before { content: '\e811'; } /* '' */
.icon-trash:before { content: '\e812'; } /* '' */
.icon-doc:before { content: '\e813'; } /* '' */
.icon-note:before { content: '\e814'; } /* '' */
.icon-cog:before { content: '\e815'; } /* '' */
.icon-params:before { content: '\e816'; } /* '' */
.icon-calendar:before { content: '\e817'; } /* '' */
.icon-sound:before { content: '\e818'; } /* '' */
.icon-clock:before { content: '\e819'; } /* '' */
.icon-lightbulb:before { content: '\e81a'; } /* '' */
.icon-tv:before { content: '\e81b'; } /* '' */
.icon-desktop:before { content: '\e81c'; } /* '' */
.icon-mobile:before { content: '\e81d'; } /* '' */
.icon-cd:before { content: '\e81e'; } /* '' */
.icon-inbox:before { content: '\e81f'; } /* '' */
.icon-globe:before { content: '\e820'; } /* '' */
.icon-cloud:before { content: '\e821'; } /* '' */
.icon-paper-plane:before { content: '\e822'; } /* '' */
.icon-fire:before { content: '\e823'; } /* '' */
.icon-graduation-cap:before { content: '\e824'; } /* '' */
.icon-megaphone:before { content: '\e825'; } /* '' */
.icon-database:before { content: '\e826'; } /* '' */
.icon-key:before { content: '\e827'; } /* '' */
.icon-beaker:before { content: '\e828'; } /* '' */
.icon-truck:before { content: '\e829'; } /* '' */
.icon-money:before { content: '\e82a'; } /* '' */
.icon-food:before { content: '\e82b'; } /* '' */
.icon-shop:before { content: '\e82c'; } /* '' */
.icon-diamond:before { content: '\e82d'; } /* '' */
.icon-t-shirt:before { content: '\e82e'; } /* '' */
.icon-wallet:before { content: '\e82f'; } /* '' */

View Code

1.4.四、字體格式轉換

有時候咱們手上只有一個字體文件，可是web font爲了兼容常常須要多個種格式支持，通常至少2種，一種要考慮IE瀏覽器，一種要考慮現代瀏覽器。可使用以下的工具實如今線字體的轉換，基本方法是將字體上傳，在線服務的網站將一個字體文件變換成多個字體文件後下載。

經常使用的字體轉換在線工具以下：

https://www.fontsquirrel.com/tools/webfont-generator

https://everythingfonts.com/

http://www.freefontconverter.com/

http://www.font2web.com/

這裏以webfont-generator爲例，測試結果以下：

先下載字體，英文字體能夠去"http://www.dafont.com/"下載，字體很是多，能夠按需求搜索，這裏下載了一款卡通3D字體。

經常使用在線工具：http://tool.lu/

字體下載：http://www.dafont.com/

1.4.五、查看字體編碼

有時候咱們手上有一個圖標字體文件，可是不知道他的對應編碼，在線工具能夠檢測到一些，但有時發如今線工具並非能檢測到全部的編碼，使用工具：FontCreator，不只能夠建立本身的字體還能夠查看字體的詳細內容。

1.4.六、base64內嵌字體

有些小的字體文件能夠直接編碼成base64將字符放在css文件中，讓css直接解析，這種辦法能夠減小一些客戶端的請求，圖片與字體文件均可以這樣作，以下所示：

第一步先將字體文件轉換成base64的編碼，固然也能夠將base64的編碼反向轉換成字體文件，可使用在線工具：

http://www.motobit.com/util/base64-decoder-encoder.asp

第二將編碼複製到css文件中，剩下的步驟與前面使用web font就是同樣的了，示例以下：

運行結果：

https://www.web-font-generator.com/

2、CSS Sprite

CSS Sprites也就是一般說的CSS精靈，也有人稱爲雪碧圖，是對網頁中加載的圖片的處理技術。在一個網頁中可能有多張小的圖片，如圖標等，會向服務器發送多個請請求，請求數越多，服務器的壓力就越大，精靈技術就是先將多張小的圖片合併成一張圖片，而後在CSS中分開爲多張小圖片的一種技術。以下圖所示：

2.一、將小圖片合併

可使用在線合併，也可使用photoshop合併，更加省事的辦法是使用一些小工具，如「Css Sprite Tools」、「CSS Satyr 」,「iwangx」

2.二、使用CSS分離圖片

爲了分離圖片，須要先了解background-position屬性：

做用：設置或檢索對象的背景圖像位置，必須先指定 <' background-image '> 屬性

示例：

沒用background-position前的效果：

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 100%;
                height: 400px;
                background: url('img/1298.jpg') no-repeat;            
            }
        </style>
    </head>
    <body>
        <div class="div1">            
        </div>
    </body>
</html>

用background-position後的效果以下：

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 100%;
                height: 400px;
                background: url('img/1298.jpg') no-repeat;        
                background-position: -250px -150px;    
            }
        </style>
    </head>
    <body>
        <div class="div1">            
        </div>
    </body>
</html>