可以看作一種特殊字體,其展示的是圖標,而不再是文字,其擁有字體的特性,比如大小、顏色、透明效果、陰影等,字體圖標加載快、不變形。也可以看作是矢量格式的圖標。
(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小時內與您取得聯系。