網頁設計之字體和 CSS 調整

調整 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 這樣的代理服務或者本身構建了代理，首先要作的都應該是縮小頁面。用戶喜歡能夠快速加載的頁面。他們會（默默地）感謝你，服務器的負載也會更小。