整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
譯自： 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中國 榮譽推出
天逛codepen的時候發現了一個不錯的文字動畫效果，如此絲滑飄逸的效果必須得研究研究，可以看到字體粗細切換過渡效果很均勻，不像我們平常使用字體時設置 font-weight 的效果，日常設置字重的時候并不是每個值都會生效，只會有幾個區間的值是可用的，以下代碼給6個p標簽設置font-weight 從 100 到 600：
@for $i from 1 through 6 {
p:nth-child(#{$i}) {
font-weight: 100 + 100 * ($i - 1);
}
}
可以看到并不是每個階段字重都有變化的，當然這和不同的字體和是否中英文有一定的關系，但是設置字重的效果都是不夠理想的狀態。
這里就要引出今天文章所講的可變字體了，基于可變字體（font-variation）將不再有這種困擾，當然也會有一定的弊端。
可變字體（Variable Fonts），也稱為多軸字體、自由度字體或超級字體，是一種新興的字體技術，它是一種可以在多個自由度上進行動態調整的字體格式。與傳統字體不同的是，「可變字體能夠在單個字體文件中包含多種字重、寬度、傾斜和其他軸的變體，而不需要使用多個不同的字體文件」。
簡單理解可變字體就是通過使用可變字體，所有字重、字寬、斜體等情況的組合都可以被裝在一個文件中。相應的弊端就是這個文件可能比常規的單個字體文件更大了。
可變字體支持使用font-variation-settings屬性來控制字體的各種軸，通過調整這些軸的值，可以實現自定義字體樣式的效果。
以下設置一個可變字體的粗細從 100 到 600，
font-variation-settings: "wght" 100, "ital" 0;
可以看到這次的字體是均勻的變化粗細，就如同設置 font-weight: 100到 font-weight: 600 的逐漸變化。
可變字體瀏覽器兼容情況，可以看到基本的瀏覽器都已經支持。
這個是根據字體的設計者來決定，字體的設計提供了各種各種可以被修改的軸，比如粗細，長短以及任何合理范疇之內的。下面提供幾個常用的保留軸:
如果你想要使用它，你首先要找到相關字體資源。在這個網站 v-fonts.com 你能找到很多可變字體，很多都是在github開源，并且可以直接下載的。
通過@font-face引入到頁面內：
@font-face {
font-family: 'VennVF';
src: url('VennVF_W.woff2') format('woff2-variations'),
url('VennVF_W.woff2') format('woff2');
}
每個可變字體都有不同的軸和不同的范圍，如果你不知道可變字體能做什么改變，你可以使用這個（wakamaifondue.com）在線工具，可以幫你生成現成的css使用。
目前可以通過font-variation-settings屬性，我們可以方便地控制自定義字體的不同軸，比如設置如下代碼：
p {
font-family: "VennVF";
font-variation-settings: "wght" 550, "wdth" 125;
}
這段代碼改變字體粗細為550，還有寬窄為125。在未來可能可以使用以下屬性來得到同樣的效果：
p {
font-family: "VennVF";
font-weight: 550;
font-stretch: 125%;
}
如下所示是一個例子：
h1 {
font-family: 'Inter Variable', sans-serif;
font-variation-settings:
"wght" 700,
"ital" 1,
"opsz" 48;
}
在這個例子中，我們將可變字體‘Inter’設置為700字重、1傾斜度和48像素字號的標題字體。可以看到，通過font-variation-settings屬性，我們可以方便地控制自定義字體的不同軸，實現更加細膩、靈活的排版效果。
首圖的字體有如同呼吸，飄逸的感覺，核心是基于可變字體改變字體的粗細，并給不同的字符增加不同的延遲動畫效果即可達到最終的效果。
@keyframes change {
0% {
font-variation-settings: "wght" 900, "ital" 1;
}
50% {
font-variation-settings: "wght" 100, "ital" 0;
}
100% {
font-variation-settings: "wght" 900, "ital" 1;
}
}
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: change;
transition-timing-function: ease-in-out;
@for $line from 1 through 4 {
@for $letter from 1 through 10 {
&:nth-child(#{$line}) span:nth-child(#{$letter}) {
animation-delay: #{$letter * 0.1s + $line * 0.2s};
}
}
}
代碼并不多，但實現的效果很不錯，基于可變字體設計，我們可以實現更加智能、美觀、易讀的排版效果，讓文字內容更加生動、豐富。
在線效果預覽：https://code.juejin.cn/pen/7234826432050888765
以下是一些看到的案例效果，供大家參考。
國內常用的中文字體思源黑體也支持可變字體。
這個Google動畫和本文頭圖的效果類似，給不同的字符加了不同的延遲加粗字體動畫。
這個效果通過改變不同單詞的可變字體的字重和寬窄呈現出一種不一樣的效果。
以下的幾個效果圖都來源于v-fonts.com，諸如此類的效果還有很多，總共可變字體有三百多個，大家有興趣的可以去找找看。
通過改變animation值可以讓小圖標動起來，是不是打開了很多新的思路。
這個字體比較有特色，大寫字母是在上方有一根長長的線，小寫字母是在下方有一根線，通過調整tracking軸的數值可以改變橫線的長度。
這個字體就是一條波浪線，通過調整Width軸可以改變波浪的大小和幅度，都可以基于這個可變字體做水波紋效果了。
關于可變字體的詳細介紹使用大家可以看這篇文章 「variable fonts - 更小更靈活的字體」。可變字體的設計讓文字內容更加生動、豐富，有興趣的朋友可以試試看～
看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
「專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）」
variable fonts - 更小更靈活的字體：github.com/FoxDaxian/memory/issues/4
Variable Font Animation： codepen.io/typeforward/pen/abRpoxV
天我們來學習如何用 CSS 字體屬性定義字體，加粗，大小，文字等樣式。
serif 和 sans-serif 字體之間的區別
在計算機屏幕上，sans-serif 字體被認為是比 serif 字體容易閱讀。
CSS字型
在CSS中，有兩種類型的字體系列名稱：
?
通用字體系列 - 擁有相似外觀的字體系統組合（如 "Serif" 或 "Monospace"）
特定字體系列 - 一個特定的字體系列（如 "Times" 或 "Courier"）
字體系列
font-family 屬性應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明。
代碼如下
p{font-family:"Times New Roman", Times, serif;}
字體樣式
字體樣式主要是用于指定斜體文字的字體樣式屬性。這個屬性有三個值：
正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
代碼如下
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。font-size 屬性用來設置文本的大小。
請務必使用正確的HTML標簽，就 <h1> - <h6> 表示標題和 <p> 表示段落：
字體大小的值可以是絕對或相對的大小。
絕對大小：
設置一個指定大小的文本，不允許用戶在所有瀏覽器中改變文本大小，確定了輸出的物理尺寸時絕對大小很有用。
相對大小：
相對于周圍的元素來設置大小，允許用戶在瀏覽器中改變文字大小。
如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
設置字體大小像素
設置文字的大小與像素，讓你完全控制文字大小。
代碼如下
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通過縮放瀏覽器調整文本大小。
雖然可以通過瀏覽器的縮放工具調整文本大小，但是，這種調整是整個頁面，而不僅僅是文本。
用em來設置字體大小
為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。
em的尺寸單位由W3C建議。1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
代碼如下
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子，em的文字大小是與前面的例子中像素一樣。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調整文本的大小時，會比正常的尺寸更大或更小。
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body> 元素的默認字體大小的是百分比。
代碼如下
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
所有CSS字體屬性
今天大家學會了嗎?沒學會可以私信小編"666"
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
