整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
譯自： https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter
譯者： David Dai
歡迎回到我們?yōu)榱藰?gòu)建更快網(wǎng)頁所寫的系列文章。本系列的 第一部分 和 第二部分 講述了如何通過優(yōu)化和替換圖片來減少瀏覽器脂肪。本部分會著眼于在 CSS（ 層疊式樣式表 ）和字體中減掉更多的脂肪。
首先，我們先來看看問題的源頭。CSS 的出現(xiàn)曾是技術(shù)的一大進(jìn)步。你可以用一個集中式的樣式表來裝飾多個網(wǎng)頁。如今很多 Web 開發(fā)者都會使用 Bootstrap 這樣的框架。
這些框架當(dāng)然方便，可是很多人都會將整個框架直接復(fù)制粘貼走。Bootstrap 非常大：目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在這個以 TB 來計數(shù)據(jù)的時代，它可能不算多。但就像所說的那樣，一頭小牛也能搞出大麻煩。
我們回頭來看 getfedora.org 的例子。我們在 第一部分 中提過，第一個分析結(jié)果顯示 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 嗎？或者，它們能不能合起來呢？沒錯，它們可以。這樣雖然不會節(jié)省更多的文件空間，但瀏覽器成功渲染頁面所需要發(fā)起的請求更少了。
最后，在合并 CSS 文件后，嘗試去除無用樣式并縮小它們。這樣，它們只有 4.3 KB 大小，而你省掉了 10.1 KB.
不幸的是，在 Fedora 軟件倉庫中，還沒有打包好的縮小工具。不過，有幾百種在線服務(wù)可以幫到你。或者，你也可以使用 CSS-HTML-JS Minify ，它用 Python 編寫，所以容易安裝。現(xiàn)在沒有一個可用的工具來凈化 CSS，不過我們有 UnCSS 這樣的 Web 服務(wù)。
CSS3 帶來了很多開發(fā)人員喜歡的東西。它可以定義一些渲染頁面所用的字體，并讓瀏覽器在后臺下載。此后，很多 Web 設(shè)計師都很開心，尤其是在他們發(fā)現(xiàn)了 Web 設(shè)計中圖標(biāo)字體的用法之后。像 Font Awesome 這樣的字體集現(xiàn)在非常流行，也被廣泛使用。這是這個字體集的大小：
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 . 你可以使用公共實(shí)例，也可以配置你自己的版本，因?yàn)樗亲杂绍浖梢栽?Github 上找到。
這種自定義字體集的缺點(diǎn)在于，你必須自己來托管字體文件。你也沒法使用其它在線服務(wù)來提供更新。但與更快的性能相比，這可能算不上一個缺點(diǎn)。
現(xiàn)在，你已經(jīng)做完了所有對內(nèi)容本身的操作，來最大限度地減少瀏覽器加載和解釋的內(nèi)容。從現(xiàn)在開始，只有服務(wù)器的管理技巧才才能幫到你了。
有一個很簡單，但很多人都做錯了的事情，就是使用一些智能緩存。比如，CSS 或者圖片文件可以緩存一周。但無論如何，如果你用了 Cloudflare 這樣的代理服務(wù)或者自己構(gòu)建了代理，首先要做的都應(yīng)該是縮小頁面。用戶喜歡可以快速加載的頁面。他們會（默默地）感謝你，服務(wù)器的負(fù)載也會更小。
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter 選題： lujun9972 譯者： StdioA 校對： wxy
本文由 LCTT 原創(chuàng)編譯， Linux中國 榮譽(yù)推出
了更方便地控制網(wǎng)頁中各種各樣的字體，CSS提供了一系列的字體樣式屬性，具體如下。
(1)font-size屬性：字號
font-size屬性用于設(shè)置字號，該屬性的屬性值可以為像素值、百分比數(shù)值、倍率等。表3-l列舉了fomt-size屬性常用的屬性值單位，具體如下。
單位 | 說明 |
em | 倍率單位，指相對于當(dāng)前對象內(nèi)文本的字體倍率 |
px | 像素值單位，是阿頁設(shè)計中常用的單位 |
% | 百分比數(shù)值單位，指相對于當(dāng)前對象內(nèi)文本的字體百分比 |
在表1所列的常用單位中，推薦使用像素值單位—px。例如，將網(wǎng)頁中所有段落文本的字號設(shè)為12px，CSS樣式示例代碼如下：
· p(font-size:12px;)(2)font-family屬性：字體fomt-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。例如，將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，CSS樣式示例代碼如下：
p[font-family：“微軟雅黑“：]fomt-family屬性可以同時指定多個字體，各字體之間以逗號隔開。如果瀏覽器不支持第一種字體，則會嘗試下一種，直到匹配到合適的字體。例如，同時指定3種字體的CSS樣式示例代碼如下：
body[font-fanily:“華文彩云”，“宋體“，“黑體"；]當(dāng)應(yīng)用上述代碼后，瀏覽器會首選“華文彩云”字體，如果用戶計算機(jī)上沒有安裝該字體則選擇“宋體”。以此類推，當(dāng)fomt-fammily屬性指定的字體都沒有安裝時，瀏覽器就會選擇用戶計算機(jī)默認(rèn)的字體。使用font-family屬性設(shè)置字體時，需要注意以下幾點(diǎn)。
· 各種字體之間必須使用英文逗號隔開。
· 中文字體需要加英文引號，但英文字體不需要加引號。當(dāng)需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。CSS樣式示例代碼如下：
body[font-fanily：Arial，“微款雅黑”，“未體”，”黑體”：] /“正確的書寫方式"
body(font-fanijy：“微軟稚黑”，“宋體”。“黑體”，Arial:) /“錯誤的書寫方式"/· 如果字體名包含空格、#、S等符號，則該字體必須加英文引號，如“font-family.“Times New Roman":"
· 盡量使用系統(tǒng)欺認(rèn)字體，以保證網(wǎng)頁中的文字在任何用戶的瀏覽器中都能正確顯示。
(3)font-weight屬性：字體粗細(xì)
font-weighn 屬性用于定義字體的粗細(xì)，其屬性值如表所示。
值 | 描述 |
normal | 默認(rèn)屬性值，定義標(biāo)準(zhǔn)樣式的字符 |
bold | 定義粗體字符 |
bolder | 定義更粗的字符 |
lighter | 定義更細(xì)的字符 |
100~900（100的整數(shù)倍） | 定義由細(xì)到相的字符，其中400等同于normal,700等同于bold，數(shù)值越大字體越粗 |
表2列舉了常用的font-weight屬性的屬性值。在實(shí)際工作中，常用的屬性值為normal和bol,分別用于定義正常和加粗顯示的字體。
(4)font-variant屬性：變體
font-variant 屬性用于設(shè)置英文字符的變體，一般用于定義小型大寫字體，該屬性僅對英文字符有效。font-variant 屬性的可用屬性值如下。
· normal:默認(rèn)值，測覽器會顯示標(biāo)準(zhǔn)的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字
母均會轉(zhuǎn)換為大寫字母。但是所有使用小型大寫字體的字母和其余文本相比，字體尺寸更小。例如，圖3-l2中框線標(biāo)注的小型大寫字母，就是使用font-variant屬性設(shè)置的。
(5)font-style屬性：字體風(fēng)格
fomt-style屬性用于定義字體風(fēng)格。例如，設(shè)置斜體、傾斜或正常字體。font-style屬性的可用屬性值如下。
· nommal：默認(rèn)值，測覽器會顯示標(biāo)準(zhǔn)的字體樣式。
· italic：測覽器會顯示斜體的字體樣式。
· oblique：測覽器會顯示傾斜的字體樣式。
當(dāng)font-style屬性取值為italic或oblique時，文字都會顯示傾斜的樣式，兩者在顯示效果上并沒有本質(zhì)區(qū)別。但italie使用了字體的傾斜屬性，并不是所有的字體都有傾斜屬性;而obhique只是使文字傾斜，無關(guān)該字體有沒有傾斜屬性。
(6)fomt屬性：綜合設(shè)置字體樣式
fomt屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：
選擇器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}使用fomt屬性綜合設(shè)置字體樣式時，必須按上述語法格式中的順序書寫，各個屬性以空格隔開(line-height用于設(shè)置行間距，屬于文本外觀屬性，在后面將具體介紹)。例如，下面設(shè)置字體樣式的示例代碼：
p{font-fanily:Arial,"宋體";font-size:30px; font-style:italic; font-weight:boid; font-variant:
amal1-cape; line-height:40px;}上述代碼可以使用fomt屬性綜合設(shè)置字體樣式，其等價于：
p{font:italic small-caps bold 30px/40px Arial,"宋體";}其中，不需要設(shè)置的屬性可以省略(省略的屬性將取默認(rèn)值)，但必須保留fomt-size和 font-family屬性，否則font 屬性將不起作用。
下面通過一個案例具體演示如何使用fomt屬性綜合設(shè)置字體樣式，如下所示。
<!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 屬性綜合設(shè)置段落文本的字體風(fēng)格、字號，行高和字體。</p>
<p class="two“>段落2：使用font屬性綜合設(shè)置段落文本的字體風(fēng)格、字號和行高。由于省略了字體屬性font-family，
這時font屬性不起作用。</p>
</body>
</htnl>定義了兩個段落，同時使用fomt屬性分別對它們進(jìn)行相應(yīng)的設(shè)置，效果如圖。
從圖中可以看出，font屬性設(shè)置的樣式并沒有對第二個段落文本生效，這是因?yàn)閷Φ诙€段落文本的設(shè)置中省略了字體屬性“font-family”。
(7)@font-face規(guī)則
@font-face是CSS3的新增規(guī)則，用于定義服務(wù)器字體。通過@font-face規(guī)則，可以使用計算機(jī)未安裝的字體。@font-face規(guī)則定義服務(wù)器字體的基本語法格式如下：
@font-face{
font-family:字體名稱:
src：字體路徑；
}在上述語法格式中，font-family用于指定該服務(wù)器字體的名稱，該名稱可以隨意定義;sre用于指定該字體文件的路徑。
下面通過一個剪紙字體的案例來演示@font-face規(guī)則的具體用法，如下所示。
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>afont-face規(guī)則</title>
<style type-"text/css">
@font-face{
font-fanily:jianzhi; /*服務(wù)器字體名稱*/
src:url(FZJZJN.TTF); /*服務(wù)器字體文件的路徑*/
}
p{
font-fanily:jianzhi; /*設(shè)置字體樣式*/
font-size:32px;
}
</style>
</head>
<body>
<p>明確責(zé)任</p>
<p>肩負(fù)使命</p>
</body>
</htnl>在例3-6中，第7~10行代碼用于定義服務(wù)器字體;第12代碼用于為段落標(biāo)簽設(shè)置字體樣式。效果如圖所示。
從圖中可以看出，當(dāng)定義并設(shè)置服務(wù)器字體后，頁面就可以正常顯示剪紙字體。總結(jié)例3-6，可以得出使用服務(wù)器字體的步驟。
①下載字體，并存儲到相應(yīng)的文件夾中。
②使用@font-face規(guī)則定義服務(wù)器字體。
③對元素應(yīng)用“font-family”字體樣式。
SS屬性值 字體與文本
網(wǎng)頁設(shè)計中有很多的文字要去處理，標(biāo)題、段落、文章、列表以及表單中的文本。這一篇章我們討論一下HTML中的字體與文本
字體
首先要有一個認(rèn)識字體和文本不是一個東西哦。字體是不同的文本體式或者可以說是字的形體結(jié)構(gòu)。對于英文來說有很多種不同的樣式包括字母、數(shù)字和符號組成的。
文本指的是通過文本屬性描述對文本的處理方式。行高，字符間距，縮進(jìn)等。
那么網(wǎng)頁中的字體是哪里來的呢？其中有哪些屬性？文本屬性中有哪些小秘密吶？
來源
用戶機(jī)器中安裝的字體
保存在第三方網(wǎng)站上的字體（link）
保存在服務(wù)器上的字體。這些字體可以使用@font-face規(guī)則隨網(wǎng)頁一起發(fā)給瀏覽器（一般字體圖片都會放到一個單獨(dú)的服務(wù)器上，更加的優(yōu)化）
字體屬性
font-family
字體族
font-family用于設(shè)定元素中的文本使用什么字體。通常給一個文檔頁面設(shè)置一個主字體（因?yàn)?span>font-family是可以繼承的），然后針對那些需要使用不用樣式的字體在單獨(dú)應(yīng)用font-family。
因?yàn)樽煮w來源我們已經(jīng)知道了，兩條路徑要么是用戶機(jī)器，要么是網(wǎng)上，那么就存在某種字體不能再某個網(wǎng)頁中使用的可能。所以需要給出一組字體，這組字體叫做字體棧 。
簡單的來說就是就是預(yù)備隊，如果用戶機(jī)器上沒有某種字體，預(yù)備的字體就用作用了，用戶還可以使用另一種字體閱讀。
/*
font-family的值不區(qū)分大小寫 但是如果引入的是在線字體庫請不要隨意修改
有可能導(dǎo)致無法使用提供的定制字體
*/
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；}font-size
字體大小
瀏覽器樣式表默認(rèn)為每個HTML元素都設(shè)定了font-size，言外之意是我們在設(shè)置font-size的時候其實(shí)是在修改默認(rèn)值。字體大小的單位px、%、em。但是有一個很重要的點(diǎn)是字體的大小也是可以去繼承的這個地方可能會出現(xiàn)一些未知的錯誤。
px是一個很常見的單位，em也是一個單位有什么區(qū)別呢？
px是絕對單位，em是一種相對單位與百分比是一樣的，瀏覽器默認(rèn)樣式表在設(shè)定所有元素的字體大小時使用的都是相對單位em，h1被設(shè)定為2em，h2是1.5em，p是1em。默認(rèn)情況下1em = 16px。這也是font-size的基準(zhǔn)大小。
example 1
1 2 3 4 5 6 7 8 9 10 11 | <style>
/* h1此時2em */
body{font-size: 200%;}
/* h1此時應(yīng)該是多少呢？ */
body{font-size: 20px;}
p{font-size: 16px;}
</style>
<body>
<h1>我是誰</h1>
<p>font-size</p>
</body> |
tip：其它的以絕對單位設(shè)定的會重新設(shè)定字體的大小，不會產(chǎn)生繼承。同時我們在設(shè)定的時候可以選擇關(guān)鍵字值，比如x-small，medium，x-large等等 ，當(dāng)然用的很少，你會在瀏覽器看到medium感興趣的可以去觀察一下吧。
example 2
1 2 3 4 5 6 7 | <style>
/* span的字體大小是多少呢? */
p{font-size： 80%;}
</style>
<body>
<p>我是<span>小貴</span></p>
</body> |
example 3
1 2 3 4 5 6 7 8 9 10 | <style>
/* h1的字體大小是多少呢？ */
/* span的字體大小是多少呢? */
body{font-size: 150%;}
p{font-size： 80%;}
</style>
<body>
<h1>我是小小</h1>
<p>我是<span>小小</span></p>
</body> |
tip：使用絕對單位的好處是，在祖先元素的字體大小變化時，不會出現(xiàn)意外的連鎖反應(yīng)。
font-style
字體樣式
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個標(biāo)準(zhǔn)的字體樣式。 |
| italic | 瀏覽器會顯示一個斜體的字體樣式。（斜體代表強(qiáng)調(diào)含義所以還是用em） |
| oblique | 瀏覽器會顯示一個傾斜的字體樣式。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體樣式。 |
font-weight
字體粗細(xì)
這個貌似沒什么好說的，還是過了吧。主要一點(diǎn)最好使用bold，normal當(dāng)然strong標(biāo)簽是加粗的狀態(tài)，你們應(yīng)該懂我的意思。
font-variant
字體變化
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。 |
| small-caps | 瀏覽器會顯示小型大寫字母的字體。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。 |
font
簡寫，復(fù)合寫法
強(qiáng)調(diào)兩個規(guī)則
rule
必須聲明size與family。
順序 font-weight、font-style、font-variant隨意調(diào)換，其次font-size，font-family。
同時還可以設(shè)置行高 font:bold italic small-caps 16px/1.5 ‘Microsoft yahei’ 16px/1.5的這個1.5代表的是倍數(shù)。
今天就分享到這，明天在分享！
如果你們想要了解或者想要深入學(xué)習(xí)java和web可以進(jìn)我的群里進(jìn)行交流學(xué)習(xí),群號：web330336289，java644038439。歡迎我們進(jìn)去交流學(xué)習(xí)，我們一同學(xué)習(xí)一同行進(jìn)，我覺得程序員不應(yīng)該中止腳步，而是一向在學(xué)習(xí)的道路上一向行進(jìn)。
編碼：天弘
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
