字體圖標的加載原理（92）

原創 前端邢 2020-06-30 23:59

字體圖標加載的原理是：當我們需要一個字體圖標時，我們瀏覽器需要向服務器發送請求，服務器收到請求，就會處理後返回請求頁面。假如一個字體圖標發送一次請求，那我們需要很多個小字體圖標，那就會使得大大加重服務器的負擔，使其處理能力降低。實際上我們使用字體圖標是以文件形式來發送的，可以一次性把 好多字體圖標集合在一起的文件訪問出來，這樣把任務交給了瀏覽器來處理，每次使用字體圖標瀏覽器可以直接把文件中的字體圖標調用出來。這樣大大減輕了訪問發送請求的次數，減輕服務器的負擔。

類似於精靈圖的原理

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

你不知道的HTML中input新增表單屬性二十項？（97）

 type類型新增和原來的屬性如下： 屬性值 值             描述         button             定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本）         checkbox   

前端邢 2020-07-07 06:08:04

利用僞元素來做鼠標經過有遮罩層的效果（98）

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

前端邢 2020-07-07 06:08:04

h1到h6的字體大小（93）

不同瀏覽器默認的字體大小不同，若按照16px的話，h1到h6的大小如下：  瀏覽器默認爲body:100%=16px; 計算得出： h1=32px h2=24px h3=18.72px h4=16px p=16px h5=13.28px

前端邢 2020-07-07 06:08:04

input新增type類型中時間類型calendar控件和time控件（96）

新增input中type類型許多非常好用，可以都去嘗試一下！下面稍微介紹幾個： 時間類型的一般帶有 calendar（日曆的意思） 和 time 控件 <!DOCTYPE html> <html lang="en"> <head>

前端邢 2020-07-07 06:08:04

css3濾鏡開發模糊背景項目（100）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

前端邢 2020-07-07 06:08:04

input新增type屬性（94）

屬性值 值 描述 button 定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本） checkbox 定義複選框。 color 定義拾色器。 date 定義日期字段（帶有 calendar 控件） datetime 定義日期

前端邢 2020-07-07 06:07:54

HTML5 input新增type屬性color顏色拾取器是怎樣使用的？你可能不知道的javascript獲取法？（95）

color 定義拾色器。 定義和用法 type 屬性規定 input 元素的類型。 註釋：該屬性不是必需的，但是我們認爲您應該始終使用它  代碼如下：是通過js來獲取的！ <!DOCTYPE html> <html lang="e

前端邢 2020-07-07 06:07:54

css3濾鏡開發模糊背景效果（99）

一：背景全部模糊效果，中間文字部分不模糊  代碼如下：  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport

前端邢 2020-07-07 06:07:54

快捷導航shortcat製作流程（84）

主要需要解決問題： 1：如何使得文字垂直水平居中？ 2：如何使用字體圖標？  3：如何來做豎槓？   <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

前端邢 2020-06-30 23:59:13

阿里iconfont圖標使用方法（90）

進入阿里iconfont後，開始進行下載：有大概三種引用的方法，我以一種方法爲例：         

前端邢 2020-06-30 23:59:13

快捷導航shortcut部分做法二（85）

 結合上一個來看，這個是另一種技巧來做的，上一個使用僞元素來做的，就是字體圖標的做法。還有nth-child(even)上一個是做的那樣，現在是另外做的！

前端邢 2020-06-30 23:59:13

字體體標icoMoon字體圖庫下載流程（87）

點進去iconMoon App：  進行字體圖標的選擇：  也可以添加新的字體圖標：點擊Add Icons From Library : 也可以進行一些簡單的對字體圖標進行一些編輯 ：   點擊download,進行下

前端邢 2020-06-30 23:59:11

字體圖標的追加（91）

 原來的不夠用了。添加新的，意思是再加上新的，原來的不能去掉！ 點擊yes就可以了呀！   

前端邢 2020-06-30 23:59:10

字體圖標阿里iconfont圖庫下載（88）

  輸入想要的圖標名稱，比如地址，或者搜索，微信等等！               

前端邢 2020-06-30 23:59:10

精靈圖使用技巧（86）

這是一張精靈圖集合圖，一般叫做sprites或者精靈雪碧  利用背景精靈圖的位置來進行測算。因爲默認的背景圖 是靠在最右上角的，所以呢，只有移動背景圖片才能可以實現這個功能。 <!DOCTYPE html> <html lang=

前端邢 2020-06-30 23:59:09