整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。
（1）iconmoon字體圖標庫：https://icomoon.io/app
（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/
（3）font-awesome字體圖標庫：
以iconmoon為例
（1）選擇需要的圖標并下載
1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同
a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。
d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。
2）字體轉換
https://www.fontke.com/tool/convfont/
（2）字體圖標的引入
1）把字體放到項目的相應位置
將下載解壓后的fonts文件夾放到項目路徑下
2）在html頁面中引入字體
利用CSS的@font-face屬性，引入外部字體；
在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。
在html的style標簽中引入如下代碼：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）為元素用該字體
span {
font-family: "icomoon";
}4）為元素添加內容
復制demo.html中需要的圖標，如下，將其作為元素的內容。
<span>?</span> （3）新增字體圖標的引入
當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一個聲明中設置所有的字體屬性 |
font-family | 字體名稱、inherit | 設置字體類型 |
font-size | xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit | 設置字體大小 |
font-weight | normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 設置字體粗細 |
font-style | normal、italic、oblique、inherit | 設置字體風格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隸書;
line-height: 28px;
}
span {
font: italic 16px 華文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技術</h3>
<span
>在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
系統，就必須掌握 Web 前端技術。</span
>
</body>
</html>顯示為，
（2）CSS 中鏈接標簽可用的偽類：
CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。
鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。
狀態 | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。
狀 態 | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍色 | 無 | 無下畫線 |
鼠標移到 | 黑色 | #DDDDDD | 下畫線 |
正單擊 | 紅色 | #AAAAAA | 刪除線 |
已訪問 | 綠色 | 無 | 無下畫線 |
對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">這是一個鏈接</a>
</body>
</html>
顯示為，
為什么要按照這樣的順序來使用呢？ 調整幾個偽類的順序，看看會發生什么。
我們把 a:link 放到最后，效果如下：
從圖中可以發現其中的樣式屬性都被覆蓋了。
（3）列表相關的樣式屬性：
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個聲明中設置所有的列表屬性 |
list-style-image | URL、none | 設置圖像為列表項標志 |
list-style-position | inside、outside、inherit | 設置列表中列表項標志的位置 |
list-style-type | disc（默認）、circle、square、decimal 等 | 設置列表項標志的類型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif譯自： https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter
譯者： David Dai
歡迎回到我們為了構建更快網頁所寫的系列文章。本系列的 第一部分 和 第二部分 講述了如何通過優化和替換圖片來減少瀏覽器脂肪。本部分會著眼于在 CSS（ 層疊式樣式表 ）和字體中減掉更多的脂肪。
首先，我們先來看看問題的源頭。CSS 的出現曾是技術的一大進步。你可以用一個集中式的樣式表來裝飾多個網頁。如今很多 Web 開發者都會使用 Bootstrap 這樣的框架。
這些框架當然方便，可是很多人都會將整個框架直接復制粘貼走。Bootstrap 非常大：目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在這個以 TB 來計數據的時代，它可能不算多。但就像所說的那樣，一頭小牛也能搞出大麻煩。
我們回頭來看 getfedora.org 的例子。我們在 第一部分 中提過，第一個分析結果顯示 CSS 文件占用的空間幾乎比 HTML 本身還要大十倍。這里顯示了所有用到的樣式表：
那是九個不同的樣式表。其中的很多樣式在這個頁面中并沒有用上。
Font-awesome CSS 代表了包含未使用樣式的極端。這個頁面中只用到了這個字體的三個字形。如果以 KB 為單位，getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的樣式后，它只有 1.3 KB 了。這只有原來體積的 4% 左右！對于 Bootstrap CSS，原來它有 118.3 KB，清理掉無用的樣式后只有 13.2 KB，這就是差異。
下一個問題是，我們必須要這樣一個 bootstrap.css 和 font-awesome.css 嗎？或者，它們能不能合起來呢？沒錯，它們可以。這樣雖然不會節省更多的文件空間，但瀏覽器成功渲染頁面所需要發起的請求更少了。
最后，在合并 CSS 文件后，嘗試去除無用樣式并縮小它們。這樣，它們只有 4.3 KB 大小，而你省掉了 10.1 KB.
不幸的是，在 Fedora 軟件倉庫中，還沒有打包好的縮小工具。不過，有幾百種在線服務可以幫到你。或者，你也可以使用 CSS-HTML-JS Minify ，它用 Python 編寫，所以容易安裝。現在沒有一個可用的工具來凈化 CSS，不過我們有 UnCSS 這樣的 Web 服務。
CSS3 帶來了很多開發人員喜歡的東西。它可以定義一些渲染頁面所用的字體，并讓瀏覽器在后臺下載。此后，很多 Web 設計師都很開心，尤其是在他們發現了 Web 設計中圖標字體的用法之后。像 Font Awesome 這樣的字體集現在非常流行，也被廣泛使用。這是這個字體集的大小：
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
所以問題是，你需要所有的字形嗎？很可能不需要。你可以通過 FontForge 來去除這些無用字形，但這需要很大的工作量。你還可以用 Fontello . 你可以使用公共實例，也可以配置你自己的版本，因為它是自由軟件，可以在 Github 上找到。
這種自定義字體集的缺點在于，你必須自己來托管字體文件。你也沒法使用其它在線服務來提供更新。但與更快的性能相比，這可能算不上一個缺點。
現在，你已經做完了所有對內容本身的操作，來最大限度地減少瀏覽器加載和解釋的內容。從現在開始，只有服務器的管理技巧才才能幫到你了。
有一個很簡單，但很多人都做錯了的事情，就是使用一些智能緩存。比如，CSS 或者圖片文件可以緩存一周。但無論如何，如果你用了 Cloudflare 這樣的代理服務或者自己構建了代理，首先要做的都應該是縮小頁面。用戶喜歡可以快速加載的頁面。他們會（默默地）感謝你，服務器的負載也會更小。
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter 選題： lujun9972 譯者： StdioA 校對： wxy
本文由 LCTT 原創編譯， Linux中國 榮譽推出
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
