字体图标的加载原理（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