初識CSS-字體圖標

大有學問# #頭條創作挑戰賽#

什么是字體圖標？

在html代碼中是以文字元素的形式出現，但在網頁渲染時卻以圖片的形式顯示的小圖標就叫做字體圖標。

常見形式：地址、電話、登錄窗口的頭像等。

字體圖標與精靈圖對比

字體圖標比精靈圖更為輕量化，在網頁中加載速度更快；

精靈圖在實際使用中，圖片放大或縮小時圖片會失真。

精靈圖是一張多個圖標整合的一個大圖片，后續添加或修改圖標不方便。

注：

雖然字體圖標好處多多，但是它并不能替代精靈圖。

當小圖標形式簡單且個數較少時適合使用字體圖標；

當小圖標形式復雜且個數較多時適合使用精靈圖。

字體圖標哪里來？

icomoon網站：https://icomoon.io/。

阿里iconfont字庫：https://www.iconfont.cn/。

字體圖標使用方法

以icomoon網站為例。

從網站中下載圖標壓縮包：點擊右上角“IcoMoon App”按鈕，進入字體圖標選擇頁面。

icomoon網站首頁

選中需要的圖標（選中狀態的圖標，背景顏色會變白且出現黃色邊框）后，個數可以選擇1個，也可以選擇多個。選好圖標后，點擊右下角“Generate Font ”按鈕進入下載頁面。

字體圖標選擇頁面

點擊右下角“download”按鈕進行下載。

icomoon網站圖標下載頁面

解壓下載好的壓縮包。

字體圖標下載文件解壓后的文件夾

將解壓好的文件夾整體添加到項目文件夾中，我沒有單獨設置字體文件夾，直接放在素材圖片文件夾了。

項目文件夾目錄

打開字體圖標文件夾中style.css，

復制字體聲明到html文件的style樣式中，改變url的圖標文件存放位置。

span標簽中字體樣式需要與字體聲明中樣式保持一致。

字體圖標調用

在html文件中，span標簽的內容是需要從網站中直接粘貼復制過來使用。在網站下載頁面，鼠標點擊就是選中狀態，直接ctrl+c復制即可。

字體圖標的代碼樣式調用

如此就是完整的字體圖標使用過程。另外有阿里iconfont也可以使用，也是免費的。有興趣可自行了解。

字體圖標代碼示例

<style>
  /* 字體聲明 ：從下載字體圖標的文件夾中style.css文件上復制過來的*/
  @font-face {
    font-family: 'icomoon';
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu');
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
          url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
          url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
          url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: 'icomoon';
    font-size: 100px;
    color: antiquewhite;
  }
</style>

span標簽的內容就是從字體圖標上粘貼下來的

代碼運行效果圖

好了，今天的學習就到這里了，下回學習CSS三角~

前言

全是干貨的技術殿堂

文章收錄在我的 GitHub 倉庫，歡迎Star/fork： Java-Interview-Tutorial
https://github.com/Wasabi1234/Java-Interview-Tutorial

this 是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。

教科書般的解釋,字都認識,怎么連在一起還是不知道啥意思呢?

1 this的值究竟是什么呢？

函數的不同場合，this有不同值。

總的來說，this就是函數運行時所在的環境對象。

1.1 簡單函數調用

函數的最通常用法，屬全局性調用，因此this就代表全局對象。

看下面案例

1.2 作為對象方法的調用

函數還可以作為某個對象的方法調用，這時this就指這個上級對象。

記住一條：當function被作為method調用時，this指向調用對象。另外，JavaScript并不是OO的，而是object based的一種語言。

1.3 構造函數

所謂構造函數，就是通過這個函數，可以生成一個新對象。這時，this就指這個新對象。

上面兩套代碼等效可以寫class test,但本質上new test()的時候，還是test構造函數,差不多，class主要是向java之類的語言抄的,可以直接當java的類用,但本質上test還是個構造函數,因為js一開始就沒有class 只能用構造函數，函數test運行時，內部會自動有一個this對象可以使用。

運行結果為1。為了表明這時this不是全局對象，我們對代碼做一些改變：

運行結果為2，表明全局變量x的值根本沒變。

1.4 apply 調用

apply()是函數的一個方法，作用是改變函數的調用對象。它的第一個參數就表示改變后的調用這個函數的對象。因此，這時this指的就是這第一個參數。

apply()的參數為空時，默認調用全局對象。因此，這時的運行結果為0，證明this指的是全局對象。

如果把最后一行代碼修改為

運行結果就變成了1，證明了這時this代表的是對象obj。

2 深入內存分析

學懂 JavaScript 語言，一個標志就是理解下面兩種寫法，可能有不一樣的結果。

上面代碼中，雖然obj.foo和foo指向同一個函數，但是執行結果可能不一樣。請看下面的例子。

對于obj.foo()來說，foo運行在obj環境，所以this指向obj
對于foo()來說，foo運行在全局環境，所以this指向全局環境。所以，兩者的運行結果不一樣。

為什么會這樣？函數的運行環境到底是誰決定的？為什么obj.foo()就是在obj環境執行，而一旦var foo=obj.foo，foo()就變成全局環境執行了？

帶著靈魂的思考,我們深入解析下

2.1 內存布局

上面的代碼將一個對象賦值給變量obj.

JS 引擎會先在內存里面，生成一個對象{ foo: 5 }，然后把這個對象的內存地址賦值給變量obj。

變量obj是一個地址（reference）。后面如果要讀取obj.foo，引擎先從obj拿到內存地址，然后再從該地址讀出原始的對象，返回它的foo屬性。

原始的對象以字典結構保存，每一個屬性名都對應一個屬性描述對象。舉例來說，上面例子的foo屬性，實際上是以下面的形式保存的。

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

注意，foo屬性的值保存在屬性描述對象的value屬性里面。

3 函數

這樣的結構是很清晰的，問題在于屬性的值可能是一個函數。

引擎會將函數單獨保存在內存中，然后再將函數的地址賦值給foo屬性的value屬性

{
  foo: {
    [[value]]: 函數的地址
    ...
  }
}

由于函數是一個單獨的值，所以它可以在不同的環境（上下文）執行。

4 環境變量

JavaScript 允許在函數體內部，引用當前環境的其他變量。

上面代碼中，函數體里面使用了變量x。該變量由運行環境提供。

現在問題就來了，由于函數可以在不同的運行環境執行，所以需要有一種機制，能夠在函數體內部獲得當前的運行環境（context）。所以，this就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。

上面代碼中，函數體里面的this.x就是指當前運行環境的x。

var f=function () {
  console.log(this.x);
}

var x=1;
var obj={
  f: f,
  x: 2,
};

// 單獨執行
f() // 1

// obj 環境執行
obj.f() // 2

上面代碼中，函數f在全局環境執行，this.x指向全局環境的x。

在obj環境執行，this.x指向obj.x。

回到本文開頭提出的問題，obj.foo()是通過obj找到foo，所以就是在obj環境執行。一旦var foo=obj.foo，變量foo就直接指向函數本身，所以foo()就變成在全局環境執行。

參考

Javascript 的 this 用法
JavaScript 的 this 原理

用 SVG 符號和 CSS 變量實現多彩圖標

使用圖片和 CSS 精靈制作 web 圖標的日子一去不復返了。隨著 web 字體的爆發，圖標字體已經成為在你的 web 項目中顯示圖標的第一解決方案。

字體是矢量，所以你無須擔心分辨率的問題。他們和文本一樣因為擁有 CSS 屬性，那就意味著，你完全可以應用 size 、 color 和 style 。你可以添加轉換、特效和裝飾，比如旋轉、下劃線或者陰影。

怪不得類似 Font Awesome 這類項目僅僅在 npm 至今已經被下載了超過 1500 萬次。

可是圖標字體并不完美, 這就是為什么越來越多的人使用行內 SVG 。CSS Tricks 寫了圖標字體劣于原生 SVG 元素的地方：銳利度、定位或者是因為跨域加載、特定瀏覽器錯誤和廣告屏蔽器等原因導致的失敗。現在你可以規避絕大多數這些問題了，總體上使用圖標字體是一個安全的選擇。

然而，還是有一件事情對于圖標字體來說是絕對不可能的：多色支持。只有 SVG 可以做到。

摘要：這篇博文深入闡述怎么做和為什么。如果你想理解整個思維過程，推薦閱讀。否則你可以直接在 CodePen 看最終代碼。

設置 SVG 標志圖標

行內 SVG 的問題是，它會非常冗長。你肯定不想每次使用同一個圖標的時候，還需要復制/粘貼所有坐標。這將會非常重復，很難閱讀，更難維護。

通過 SVG 符號圖標，你只需擁有一個 SVG 元素，然后在每個需要的地方引用就好了。

先添加行內 SVG ，隱藏它之后，再用 <symbol> 包裹它，用 id 對其進行識別。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path d="..." /> </symbol> </svg>

整個 SVG 標記被一次性包裹并且在 HTML 中被隱藏。

然后，所有你要做的是用一個 <use> 標簽將圖標實例化。

<svg> <use xlink:href="#my-first-icon" /> </svg>

這將會顯示一個初始 SVG 圖標的副本。

**就是這樣了！**看起來很棒，是吧？

你可能注意到了這個有趣的 xlink:href 屬性：這是你的實例與初始 SVG 之間的鏈接。

需要提到的是 xlink:href 是一個棄用的 SVG 屬性。盡管大多數瀏覽器仍然支持，你應該用 **href** 替代。現在的問題是，一些瀏覽器比如 Safari 不支持使用 href 進行 SVG 資源引用，因此你仍然需要提供 xlink:href 選項。

安全起見，兩個都用吧。

添加一些顏色

不像是字體， color 對于 SVG 圖標沒有任何作用：你必須使用 fill 屬性來定義一個顏色。這意味著他們將不會像圖標字體一樣繼承父文本顏色，但是你仍然可以在 CSS 中定義它們的樣式。

// HTML <svg class="icon"> <use xlink:href="#my-first-icon" /> </svg> // CSS .icon { width: 100px; height: 100px; fill: red; }

在這里，你可以使用不同的填充顏色創建同一個圖標的不同實例。

// HTML <svg class="icon icon-red"> <use xlink:href="#my-first-icon" /> </svg> <svg class="icon icon-blue"> <use xlink:href="#my-first-icon" /> </svg> // CSS .icon { width: 100px; height: 100px; } .icon-red { fill: red; } .icon-blue { fill: blue; }

這樣就可以生效了，但是不完全符合我們的預期。目前為止，我們所有做的事情可以使用一個普通的圖標字體來實現。我們想要的是在圖標的位置可以有不同的顏色。我們想要向每個路徑上填充不同顏色，而不需要改變其他實例，我們想要能夠在必要的時候重寫它。

首先，你可能會受到依賴于特性的誘惑。

// HTML <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path class="path1" d="..." /> <path class="path2" d="..." /> <path class="path3" d="..." /> </symbol> </svg> <svg class="icon icon-colors"> <use xlink:href="#my-first-icon" /> </svg> // CSS .icon-colors .path1 { fill: red; } .icon-colors .path2 { fill: green; } .icon-colors .path3 { fill: blue; }

不起作用。

我們嘗試設置 .path1 、 .path2 和 .path3 的樣式，仿佛他們被嵌套在 .icon-colors 里，但是嚴格來說，并非如此。 <use> 標簽不是一個會被你的 SVG 定義替代的占位符。這是一個引用將它所指向內容復制為 shadow DOM 。

**那接下來我們該怎么辦？**當子項不在 DOM 中時，我們如何才能用一個區域性的方式影響子項？

CSS 變量拯救世界

在 CSS 中，一些屬性從父元素繼承給子元素。如果你將一個文本顏色分配給 body ，這一頁中所有文本將會繼承那個顏色直到被重寫。父元素沒有意識到子元素，但是可繼承的樣式仍然繼續傳播。

在我們之前的例子里，我們繼承了填充屬性。回頭看，你會看到我們聲明填充顏色的類被附加在了實例上，而不是定義上。這就是我們能夠為同一定義的每個不同實體賦予不同顏色的原因。

現在有個問題：我們想傳遞不同顏色給原始 SVG 的不同路徑，但是只能從一個 fill 屬性里繼承。

這就需要 CSS 變量了。

就像任何其它屬性一樣， CSS 變量在規則集里被聲明。你可以用任意命名，分配任何有效的 CSS 值。然后，你為它自己或者其它子屬性，像一個值一樣聲明它，并且這將被繼承。

.parent { --custom-property: red; color: var(--custom-property); }

所有 .parent 的子項都有紅色文本。

.parent { --custom-property: red; } .child { color: var(--custom-property); }

所有嵌套在 .parent 標簽里的 .child 都有紅色文本。

現在，讓我們把這個概念應用到 SVG 符號里去。我們將在 SVG 定義的每個部分使用 fill 屬性，并且設置成不同的 CSS 變量。然后，我們將給它們分配不同的顏色。

// HTML <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path fill="var(--color-1)" d="..." /> <path fill="var(--color-2)" d="..." /> <path fill="var(--color-3)" d="..." /> </symbol> </svg> <svg class="icon icon-colors"> <use xlink:href="#my-first-icon" /> </svg> // CSS .icon-colors { --color-1: #c13127; --color-2: #ef5b49; --color-3: #cacaea; }

然后… 生效了 !

現在開始，為了用不同的顏色方案創建實例，我們所需要做的是創建一個新類。

// HTML <svg class="icon icon-colors-alt"> <use xlink:href="#my-first-icon" /> </svg> // CSS .icon-colors-alt { --color-1: brown; --color-2: yellow; --color-3: pink; }

如果你仍然想有單色圖標，你不必在每個 CSS 變量中重復同樣的顏色。相反，你可以聲明一個單一 fill 規則：因為如果 CSS 變量沒有被定義，它將會回到你的 fill 聲明。

.icon-monochrome { fill: grey; }

你的 fill 聲明將會生效，因為初始 SVG 的 fill 屬性被未設置的 CSS 變量值定義。

怎樣命名我的 CSS 變量？

當提到在 CSS 中命名，通常有兩條途徑：描述的或者語義的。描述的意思是告訴一個顏色是什么：如果你存儲了 #ff0000 你可以叫它 --red 。語義的意思是告訴顏色它將會被如何應用：如果你使用 #ff0000 來給一個咖啡杯把手賦予顏色，你可以叫它 --cup-handle-color 。

描述的命名也許是你的本能。看起來更干脆，因為#ff0000 除了咖啡杯把手還有更多地方可以被使用。一個 --red CSS 變量可被復用于其他需要變成紅色的圖標路徑。畢竟，這是實用主義在 CSS 中的工作方式。并且是一個良好的系統。

問題是，在我們的案例里，我們不能把零散的類應用于我們想設置樣式的標簽。實用主義原則不能應用，因為我們對于每個圖標有單獨的引用，我們不得不通過類的變化來設置樣式。

使用語義類命名，例如 --cup-handle-color ，對于這個情況更有用。當你想改變圖標一部分的顏色時，你立即知道這是什么以及需要重寫什么。無論你分配什么顏色，類命名將會一直關聯。

默認還是不要默認，這是個問題

將你的圖標的多色版本設置成默認狀態是很有誘惑力的選擇。這樣，你無需設置額外樣式，只需要在必要的時候可以添加你自己的類。

有兩個方法可以實現：:root 和 var() default 。

:root

在 :root 選擇器中你可以定義所有你的 CSS 變量。這將會把它們統一放在一個位置，允許你『分享』相似的顏色。 :root 擁有最低的優先度，因此可以很容易地被重寫。

:root { --color-1: red; --color-2: green; --color-3: blue; --color-4: var(--color-1); } .icon-colors-alt { --color-1: brown; --color-2: yellow; --color-3: pink; --color-4: orange; }

然而，這個方法有一個主要缺點。首先，將顏色定義與各自的圖標分離可能會有些讓人疑惑。當你決定重寫他們，你必須在類與 :root 選擇器之間來回操作。但是更重要的是，它不允許你去關聯你的 CSS 變量，因此讓你不能復用同一個名字。

大多數時候，當一個圖標只用一種顏色，我用 --fill-color 名稱。簡單，易懂，對于所有僅需要一種顏色的圖標非常有意義。如果我必須在 :root 聲明中聲明所有變量，我就不會有幾個 --fill-color。我將會被迫定義 --fill-color-1 ， --fill-color-2 或者使用類似 --star-fill-color ， --cup-fill-color 的命名空間。

var() 默認

你可以用 var() 功能來把一個 CSS 變量分配給一個屬性，并且它的第二個參數可以設置為某個默認值。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path fill="var(--color-1, red)" d="..." /> <path fill="var(--color-2, blue)" d="..." /> <path fill="var(--color-3, green)" d="..." /> </symbol> </svg>

在你定義完成 --color-1 ， --color-2 和 --color-3 之前，圖標將會使用你為每個 <path> 設置的默認值。這解決了當我們使用 :root 時的全局關聯問題，但是請小心：你現在有一個默認值，并且它將會生效。結果是，你再也不能使用單一的 fill 聲明來定義單色圖標了。你將不得不一個接一個地給每個使用于這個圖標的 CSS 變量分配顏色。

設置默認值會很有用，但是這是一個折中方案。我建議你不要形成習慣，只在對給定項目有幫助的時候做這件事情。

How browser-friendly is all that?

CSS 變量與大多數現代瀏覽器兼容，但是就像你想的那樣， Internet Explorer 完全不兼容。因為微軟要支持 Edge 終止了 IE11 開發， IE 以后也沒有機會趕上時代了。

現在，僅僅是因為一個功能不被某個瀏覽器（而你必須適配）兼容，這不意味著你必須全盤放棄它。在這種情況下，考慮下優雅降級：給現代瀏覽器提供多彩圖標，給落后瀏覽器提供備份的填充顏色。

你想要做的是設置一個僅在 CSS 變量不被支持時觸發的聲明。這可以通過設置備份顏色的 fill 屬性實現：如果 CSS 變量不被支持，它甚至不會被納入考慮。如果它們不能被支持，你的 fill 聲明將會生效。

如果你使用 Sass 的話，這個可以被抽象為一個 @mixin 。

@mixin icon-colors($fallback: black) { fill: $fallback; @content; }

現在，你可以任意定義顏色方案而無需考慮瀏覽器兼容問題了。

.cup { @include icon-colors() { --cup-color: red; --smoke-color: grey; }; } .cup-alt { @include icon-colors(green) { --cup-color: green; --smoke-color: grey; }; }

在 mixin 中通過 @content 傳遞 CSS 變量也是一個可選項。如果你在外面做這件事，被編譯的 CSS 將會變得一樣。但是它有助于被打包在一起：你可以在你編輯器中折疊片段然后用眼睛分辨在一起的聲明。

在不同的瀏覽器中查看這個 pen 。在最新版本的 Firefox ， Chrome 和 Safari 中，最后兩只杯子各自擁有紅色杯身灰色煙氣和藍色杯身灰色煙氣。在 IE 和版本號小于 15 的 Edge 中，第三個杯子的杯身與煙氣全部都是紅色，第四個則全部是藍色！ ?

在線咨詢

上一篇：前端：給選中的目標Item加樣式，Pseudo-cl
下一篇：JavaScript｜日期格式化、今天、昨天、明天和

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商