css3中的@font-face你真的瞭解嗎

qwguo發表於2020-06-13
CSSS3

css3中的自定義字型方法@font-face

@font-face屬性可以讓我們自定義網站字型屬性，然後引用到想要應用該字型的元素上。

基本語法：

@font-face {
  font-family: <font-name>;
  src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
  unicode-range: <unicode-range>;
  font-variant: <font-variant>;
  font-feature-settings: <font-feature-settings>;
  font-variation-settings: <font-variation-settings>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
  font-display: <font-display>;
}

屬性規則說明

font-family

給你引入的字型起一個專屬的字型名字，font-name，然後他會在元素font-family:中使用，如div{font-family:font-name}；

src

用於指定載入字型檔案的路徑或者載入本地字型

local

載入一個本地字型，font-name表示本地的字型名稱，比如Microsoft YaHei | 微軟雅黑；如果本地有應用此字型顯示文字。

示例：

/* 載入一個本地字型 */
@font-face{
  font-family: myFont;
  src: local('Microsoft YaHei');
}
/* 載入多個本地字型 */
@font-face{
  font-family: myFont;
  src:  local(黑體), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local(sans-serif);
}
/* 應用自定義字型 */
.box{
  font-family: myFont;
}

在上邊程式碼中看到，可以使用一個或多個local，多個之間用逗號分開，括號中的字型名稱可以使用單引號或者雙引號括起來，也可以不帶引號直接寫字型名稱，有空格的必須新增引號，但是隻能寫一個字型名稱；
上邊的寫法讓我們在定義字型的時候變得方便很多，我們只需要定義好自定義名稱然後直接引用該字型等同於下邊程式碼：

.box{
  font-family: 黑體, "Microsoft YaHei", "HelveticaNeue-Light", "Helvetica Neue Light", "PingFang SC", sans-serif;
}

url

表示伺服器端提供的字型地址，這個也是可以使用多個，多個之間用逗號隔開，一般寫多個是為了瀏覽器相容載入不同格式的字型。目前web可以載入六種格式的字型：

  1. EOT：全拼：Embedded_OpenType，是由微軟開發的字型格式規範，所以只適用於IE瀏覽器。詳細介紹

相容：
image
相容詳情

  1. TTF：全拼：TrueType，是一種輪廓字型標準，最早是由蘋果公司研發，後來成為Mac OS、Microsoft Windows系統中最常用的字型格式。詳細介紹

相容：
image
相容詳情
3. OTF：全拼：OpenType，是可縮放計算機字型的格式，是由微軟和Adobe公司聯合開發。詳細介紹

相容：
image
相容詳情
4. WOFF：全拼：Web Open Font Formatweb網路開放字型格式，他是專為網路設計的一種字型格式，WOFF是把OpenType和TrueType字型進行了封裝，並進行了壓縮優化，它使用了廣泛應用的zlib壓縮，並新增了XML後設資料，這種字型格式體積更小，適用於網路傳輸，可以使使用者體驗做到更好。詳細介紹

相容：
image
相容詳情
5. WOFF2：它是WOFF的升級版，它使用Brotli進行位元組級壓縮，比WOFF體積更小

相容：
image
相容詳情

  1. SVG：全拼：Scalable Vector Graphics可縮放向量圖形，是一種基於可擴充套件標記語言（XML）的向量影像格式，用於二維圖形，並支援互動性和動畫，字型中就是使用svg技術來呈現文字樣式。我測試只有蘋果Safari支援； 詳細介紹

相容：
image
相容詳情

format

可選值，表示給載入的外部字型指定字型格式，用來告訴瀏覽器讓瀏覽器能夠識別所使用的字型格式，可用的型別有 embedded-opentype, truetype, opentype, woff, woff2, svg。分別對應上邊我們介紹的字型格式。

語法：

/* 載入一種字型格式 */
@font-face{
  font-family: "myFontName";
  src:  url('font.woff') format('woff');
}

/* 載入多個字型格式，相容更多瀏覽器 */
@font-face{
  font-family: "myFontName";
  src: url('font.eot'); /* IE9*/
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font.woff2') format('woff2'),
  url('font.woff') format('woff'), /* chrome、firefox */
  url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}

從上邊語法來看我們可以載入一個格式的字型檔案，也可以載入多個格式字型，之間用逗號分開，瀏覽器會優先讀取寫在前面的字型格式並且檢測是否支援，如果支援就使用該格式的字型檔案。

font-weight

表示自定義字型規則的字重程度，我們可以給一個字型指定不同的粗細規則引用不同規格的字型檔案。

語法：

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

取值說明：

  1. normal：預設值，表示該字型規則是在預設情況下的字型，也就是在應用改字型的元素中不規定字型的粗細情況或者font-weight: 400 | normal下應用該字型；
  2. bold：粗體，表示元素設定font-weight: bold | 700，或者使用<b>、<strong>元素的時候應用該字型。
  3. 400：也可以設定成數值，在CSS Fonts Level 4之前的版本只能去100-900的100倍數值，之後的數值可以去1-1000的任意數值。
  4. normal bold：可以使用多個關鍵字來定義此字型規則，多個關鍵字之間用逗號分開，表示元素字重設定為此關鍵字中的其中一個值時應用該字型。
  5. 300 500：也可以使用多個數值來定義此字型規則。

取數值情況下應該對應的每個字型：

value 對應的字型的自重名稱
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

程式碼示例：因為字型有版許可權制，這裡我們使用阿里的免費商用字型來演示

https://codepen.io/qwguo88/full/jObgQYG

從上邊的案例我們可以看出，先自定義了一個名為FW的字型，並且使用font-weight定義不同字重使用不同的字型。在上邊的案例中定義了5中字重樣式，分別是bold：阿里巴巴-普惠體-Heavy，100：楊任東竹石體-Bold，200：站酷高階黑，300 600：龐門正道標題體2，900：思源黑體-粗
然後給div設定font-family:FW;最後我們分別給這個div下的每個段落設定不同的font-weight,段落的字型就會根據不同的字重來應用不同的字型。
我們可以把自定義字型看成我們平常使用系統內建字型一樣，當我們設定字型為微軟雅黑，並且設定不同的字重他會在系統中尋找每個自重對應的字型，然後來顯示。

font-style

表示自定義字型規則的樣式表現形式，我們可以給一個字型指定不同的樣式規則引用不同規格的字型檔案。

語法：

font-style: normal | italic | oblique <angle>{0,2}

取值說明：

  1. normal：預設字樣式使用的字型規則，當我們不設定或者設定成此值時的字型。
  2. italic：表示字樣式設定成斜體的時候使用的字型規則。
  3. oblique：表示字樣式設定成斜體的時候使用的字型規則。

當我們同時定義italic和oblique規則的字型時，寫在後邊的生效所設定的斜體字型顯示。

程式碼示例： https://codepen.io/qwguo88/full/RwWXONo

unicode-range

表示自定義字型規則的unicode字元範圍

語法：

/* unicode-range 取值規則 */
unicode-range: U+26;                /* 單個值 */
unicode-range: U+0-7F;              /* 字元編碼區間*/
unicode-range: U+0025-00FF;        /* 字元編碼區間 */
unicode-range: U+4??;              /* 萬用字元區間 */
unicode-range: U+0025-00FF, U+4??; /* 可以寫多個值，多個值之間用逗號分開 */

取值說明：
取值規則：前邊是U+後邊跟上字元的charCode值

  1. 可以是單個值，表示文字中只有該字元的字應用該字型。
  2. 可以使用一個字元區間，表示文字中如果有在此區間的文字將應用改字型規則。
  3. 也可以使用萬用字元來設定一個區間規則其中?表示一個16進位制0-F的之間的值U+4??表示 U+400 到 U+4FF區間的字元編碼。
  4. 也可以使用多個值，多個值之間使用逗號分開。

案例：https://codepen.io/qwguo88/full/XWXWqmP

從上邊案例可以看出，unicode-range是用來規定應用當前字型規則的文字unicode碼在規則內的將以此字型規則顯示字型。
他能讓我們來控制一個段落中的個別字的顯示效果，一般要顯示的字型規則排在最前面，將優先顯示。

font-display

設定自定義字型在沒有載入完的顯示方式取值如下：

語法：

font-display: auto | block | swap | fallback | optional
  1. auto：字型顯示策略由使用者代理定義。
  2. block：為字型提供一個短暫的阻塞週期和無限的交換週期。也就是說等字型載入完以後字型顯示效果會自動更新成改字型
  3. swap：為字型提供一個非常小的阻塞週期和無限的交換週期。也就是說等字型載入完以後字型顯示效果會自動更新成改字型
  4. fallback：為字型提供一個非常小的阻塞週期和短暫的交換週期。也就是說等字型載入在過了一定的互動週期後載入完字型將不進行更新顯示
  5. optional：為字型提供一個非常小的阻塞週期，並且沒有交換週期。也就是說等字型載入不進行更新顯示

參考網站

  1. https://webplatform.github.io/docs/tutorials/typography/font-face/
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display
  3. https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
  4. https://www.w3cplus.com/css/font-display-masses.html

字型下載格式轉換網站

  1. https://www.fontke.com/tool/fontface/
  2. http://www.fonts.net.cn/
  3. https://fonts.google.com/

字型壓縮工具

  1. http://www.fonts.net.cn/ 字型天下
  2. http://www.ziticq.com/ 字型傳奇
  3. https://www.hellofont.cn/ 字由
  4. http://fontstore.baidu.com/static/editor/index.html 百度線上字型編輯器
  5. https://efe.baidu.com/ 百度字型處理
  6. https://www.fontsquirrel.com/tools/webfont-generator 字型格式換
  7. https://www.fontke.com/tool/fontface/ 字型轉換

相關文章