設計更快的網頁（三）：字體和 CSS 調整

譯自： https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter
譯者： David Dai

歡迎回到我們為了構建更快網頁所寫的系列文章。本系列的第一部分和第二部分講述了如何通過優化和替換圖片來減少瀏覽器脂肪。本部分會著眼于在 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 這樣的代理服務或者自己構建了代理，首先要做的都應該是縮小頁面。用戶喜歡可以快速加載的頁面。他們會（默默地）感謝你，服務器的負載也會更小。

via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/

作者： Sirko Kemter 選題： lujun9972 譯者： StdioA 校對： wxy

本文由 LCTT 原創編譯， Linux中國榮譽推出

點擊“了解更多”可訪問文內鏈接

了更方便地控制網頁中各種各樣的字體，CSS提供了一系列的字體樣式屬性，具體如下。

(1)font-size屬性：字號

font-size屬性用于設置字號，該屬性的屬性值可以為像素值、百分比數值、倍率等。表3-l列舉了fomt-size屬性常用的屬性值單位，具體如下。

單位	說明
em	倍率單位，指相對于當前對象內文本的字體倍率
px	像素值單位，是阿頁設計中常用的單位
%	百分比數值單位，指相對于當前對象內文本的字體百分比

在表1所列的常用單位中，推薦使用像素值單位—px。例如，將網頁中所有段落文本的字號設為12px，CSS樣式示例代碼如下：

· p(font-size:12px;)

(2)font-family屬性：字體fomt-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。例如，將網頁中所有段落文本的字體設置為微軟雅黑，CSS樣式示例代碼如下：

p[font-family：“微軟雅黑“：]

fomt-family屬性可以同時指定多個字體，各字體之間以逗號隔開。如果瀏覽器不支持第一種字體，則會嘗試下一種，直到匹配到合適的字體。例如，同時指定3種字體的CSS樣式示例代碼如下：

body[font-fanily:“華文彩云”，“宋體“，“黑體"；]

當應用上述代碼后，瀏覽器會首選“華文彩云”字體，如果用戶計算機上沒有安裝該字體則選擇“宋體”。以此類推，當fomt-fammily屬性指定的字體都沒有安裝時，瀏覽器就會選擇用戶計算機默認的字體。使用font-family屬性設置字體時，需要注意以下幾點。

· 各種字體之間必須使用英文逗號隔開。

· 中文字體需要加英文引號，但英文字體不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。CSS樣式示例代碼如下：

body[font-fanily：Arial，“微款雅黑”，“未體”，”黑體”：] /“正確的書寫方式"
body(font-fanijy：“微軟稚黑”，“宋體”。“黑體”，Arial:) /“錯誤的書寫方式"/

· 如果字體名包含空格、#、S等符號，則該字體必須加英文引號，如“font-family.“Times New Roman":"

· 盡量使用系統欺認字體，以保證網頁中的文字在任何用戶的瀏覽器中都能正確顯示。

(3)font-weight屬性：字體粗細

font-weighn 屬性用于定義字體的粗細，其屬性值如表所示。

值	描述
normal	默認屬性值，定義標準樣式的字符
bold	定義粗體字符
bolder	定義更粗的字符
lighter	定義更細的字符
100~900（100的整數倍）	定義由細到相的字符，其中400等同于normal,700等同于bold，數值越大字體越粗

表2列舉了常用的font-weight屬性的屬性值。在實際工作中，常用的屬性值為normal和bol,分別用于定義正常和加粗顯示的字體。

(4)font-variant屬性：變體

font-variant 屬性用于設置英文字符的變體，一般用于定義小型大寫字體，該屬性僅對英文字符有效。font-variant 屬性的可用屬性值如下。

· normal:默認值，測覽器會顯示標準的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字

母均會轉換為大寫字母。但是所有使用小型大寫字體的字母和其余文本相比，字體尺寸更小。例如，圖3-l2中框線標注的小型大寫字母，就是使用font-variant屬性設置的。

(5)font-style屬性：字體風格

fomt-style屬性用于定義字體風格。例如，設置斜體、傾斜或正常字體。font-style屬性的可用屬性值如下。

· nommal：默認值，測覽器會顯示標準的字體樣式。

· italic：測覽器會顯示斜體的字體樣式。

· oblique：測覽器會顯示傾斜的字體樣式。

當font-style屬性取值為italic或oblique時，文字都會顯示傾斜的樣式，兩者在顯示效果上并沒有本質區別。但italie使用了字體的傾斜屬性，并不是所有的字體都有傾斜屬性;而obhique只是使文字傾斜，無關該字體有沒有傾斜屬性。

(6)fomt屬性：綜合設置字體樣式

fomt屬性用于對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}

使用fomt屬性綜合設置字體樣式時，必須按上述語法格式中的順序書寫，各個屬性以空格隔開(line-height用于設置行間距，屬于文本外觀屬性，在后面將具體介紹)。例如，下面設置字體樣式的示例代碼：

p{font-fanily:Arial,"宋體";font-size:30px; font-style:italic; font-weight:boid; font-variant:
amal1-cape; line-height:40px;}

上述代碼可以使用fomt屬性綜合設置字體樣式，其等價于：

p{font:italic small-caps bold 30px/40px Arial,"宋體";}

其中，不需要設置的屬性可以省略(省略的屬性將取默認值)，但必須保留fomt-size和 font-family屬性，否則font 屬性將不起作用。

下面通過一個案例具體演示如何使用fomt屬性綜合設置字體樣式，如下所示。

<!doctype html>
<html>
<head>
<meta charset.-"utf-8">
<title>font l國性</title>
<style type-"text/css">
.one{ font:italic 18px/30px"隸書":}
.two{ font:italic l8px/30px;}
</style>
</head>
<body>
<p class="one">段落1：使用font 屬性綜合設置段落文本的字體風格、字號，行高和字體。</p>
<p class="two“>段落2：使用font屬性綜合設置段落文本的字體風格、字號和行高。由于省略了字體屬性font-family，
這時font屬性不起作用。</p>
</body>
</htnl>

定義了兩個段落，同時使用fomt屬性分別對它們進行相應的設置，效果如圖。

從圖中可以看出，font屬性設置的樣式并沒有對第二個段落文本生效，這是因為對第二個段落文本的設置中省略了字體屬性“font-family”。

(7)@font-face規則

@font-face是CSS3的新增規則，用于定義服務器字體。通過@font-face規則，可以使用計算機未安裝的字體。@font-face規則定義服務器字體的基本語法格式如下：

@font-face{
     font-family:字體名稱:
     src：字體路徑；
}

在上述語法格式中，font-family用于指定該服務器字體的名稱，該名稱可以隨意定義;sre用于指定該字體文件的路徑。

下面通過一個剪紙字體的案例來演示@font-face規則的具體用法，如下所示。

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>afont-face規則</title>
<style type-"text/css">
@font-face{
font-fanily:jianzhi;   /*服務器字體名稱*/
src:url(FZJZJN.TTF);   /*服務器字體文件的路徑*/
}
p{
font-fanily:jianzhi;   /*設置字體樣式*/
font-size:32px;
}
</style>
</head>
<body>
<p>明確責任</p>
<p>肩負使命</p>
</body>
</htnl>

在例3-6中，第7~10行代碼用于定義服務器字體;第12代碼用于為段落標簽設置字體樣式。效果如圖所示。

從圖中可以看出，當定義并設置服務器字體后，頁面就可以正常顯示剪紙字體。總結例3-6，可以得出使用服務器字體的步驟。

①下載字體，并存儲到相應的文件夾中。

②使用@font-face規則定義服務器字體。

③對元素應用“font-family”字體樣式。

SS屬性值字體與文本

網頁設計中有很多的文字要去處理，標題、段落、文章、列表以及表單中的文本。這一篇章我們討論一下HTML中的字體與文本

字體

首先要有一個認識字體和文本不是一個東西哦。字體是不同的文本體式或者可以說是字的形體結構。對于英文來說有很多種不同的樣式包括字母、數字和符號組成的。
文本指的是通過文本屬性描述對文本的處理方式。行高，字符間距，縮進等。
那么網頁中的字體是哪里來的呢？其中有哪些屬性？文本屬性中有哪些小秘密吶？

來源

用戶機器中安裝的字體
保存在第三方網站上的字體（link）
保存在服務器上的字體。這些字體可以使用@font-face規則隨網頁一起發給瀏覽器（一般字體圖片都會放到一個單獨的服務器上，更加的優化）

字體屬性

font-family

字體族

font-family用于設定元素中的文本使用什么字體。通常給一個文檔頁面設置一個主字體（因為font-family是可以繼承的），然后針對那些需要使用不用樣式的字體在單獨應用font-family。

因為字體來源我們已經知道了，兩條路徑要么是用戶機器，要么是網上，那么就存在某種字體不能再某個網頁中使用的可能。所以需要給出一組字體，這組字體叫做字體棧 。

簡單的來說就是就是預備隊，如果用戶機器上沒有某種字體，預備的字體就用作用了，用戶還可以使用另一種字體閱讀。

/*
	font-family的值不區分大小寫 但是如果引入的是在線字體庫請不要隨意修改
	有可能導致無法使用提供的定制字體
*/
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；}

font-size

字體大小

瀏覽器樣式表默認為每個HTML元素都設定了font-size，言外之意是我們在設置font-size的時候其實是在修改默認值。字體大小的單位px、%、em。但是有一個很重要的點是字體的大小也是可以去繼承的這個地方可能會出現一些未知的錯誤。

px是一個很常見的單位，em也是一個單位有什么區別呢？

px是絕對單位，em是一種相對單位與百分比是一樣的，瀏覽器默認樣式表在設定所有元素的字體大小時使用的都是相對單位em，h1被設定為2em，h2是1.5em，p是1em。默認情況下1em = 16px。這也是font-size的基準大小。

example 1

<style>
 /* h1此時2em */
 body{font-size: 200%;}
 /* h1此時應該是多少呢？ */
 body{font-size: 20px;}
 p{font-size: 16px;}
</style>
<body>
 <h1>我是誰</h1>
 <p>font-size</p>
</body>

tip：其它的以絕對單位設定的會重新設定字體的大小，不會產生繼承。同時我們在設定的時候可以選擇關鍵字值，比如x-small，medium，x-large等等，當然用的很少，你會在瀏覽器看到medium感興趣的可以去觀察一下吧。

example 2

<style>
 /* span的字體大小是多少呢? */
 p{font-size： 80%;}
</style>
<body>
 <p>我是<span>小貴</span></p>
</body>

example 3

<style>
 /* h1的字體大小是多少呢？ */
 /* span的字體大小是多少呢? */
 body{font-size: 150%;}
 p{font-size： 80%;}
</style>
<body>
 <h1>我是小小</h1>
 <p>我是<span>小小</span></p>
</body>

tip：使用絕對單位的好處是，在祖先元素的字體大小變化時，不會出現意外的連鎖反應。

font-style

字體樣式

值	描述
normal	默認值。瀏覽器顯示一個標準的字體樣式。
italic	瀏覽器會顯示一個斜體的字體樣式。（斜體代表強調含義所以還是用em）
oblique	瀏覽器會顯示一個傾斜的字體樣式。
inherit	規定應該從父元素繼承字體樣式。

font-weight

字體粗細

這個貌似沒什么好說的，還是過了吧。主要一點最好使用bold，normal當然strong標簽是加粗的狀態，你們應該懂我的意思。

font-variant

字體變化

值	描述
normal	默認值。瀏覽器會顯示一個標準的字體。
small-caps	瀏覽器會顯示小型大寫字母的字體。
inherit	規定應該從父元素繼承 font-variant 屬性的值。

font

簡寫，復合寫法
強調兩個規則

rule

必須聲明size與family。
順序 font-weight、font-style、font-variant隨意調換，其次font-size，font-family。
同時還可以設置行高 font:bold italic small-caps 16px/1.5 ‘Microsoft yahei’ 16px/1.5的這個1.5代表的是倍數。

今天就分享到這，明天在分享！

如果你們想要了解或者想要深入學習java和web可以進我的群里進行交流學習,群號：web330336289，java644038439。歡迎我們進去交流學習，我們一同學習一同行進，我覺得程序員不應該中止腳步，而是一向在學習的道路上一向行進。

編碼：天弘

在線咨詢

上一篇：HTML 符號
下一篇：html5背景音樂不自動播放解密（原創）

您的項目需求

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