CSS進階（18）—— CSS中的文本處理（中）

上一章講了CSS中的font屬性的相關內容，本章延續上一章的部分，把@font face規則單獨拎出來進行講解。

深刻探究@font face規則

一般咱們使用@font face是爲了引入字體庫，或字體圖標庫，用法通常以下:

<p>我要用特殊字體</p>
<style> @font-face{ font-family:'example'; //隨便取個名字 src:url(example.ttf); //引入字體包 } p{ font-family:'example'; } </style>
複製代碼

事實上，@font-face變量除了必要的font-family和src以外，還支持如下屬性。

@font-face {
    font-family: 'example';
    src: url(example.ttf);
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;
    font-stretch: expanded;
    font-feature-settings："liga1" on;
}
複製代碼

出了以上屬性，還支持不少其餘屬性，可是部分屬性跟英文字母的關係較深，例如font-variant，font-stretch，font-feature-settings這3個屬性，不須要深刻了解，unicode-range的用處較小也不用深刻了解，所以咱們只須要了解如下屬性便可。

@font-face {
  font-family: 'example';
  src: url(example.ttf);
  font-style: normal;
  font-weight: normal;
}
複製代碼

下面我將詳細介紹這五個屬性。

1.font-family

font-family是一個字體變量，名稱能夠根據本身喜愛來命名，但注意儘可能不要佔用系統的字體關鍵字，如"Microsoft Yahei"。若是使用系統的關鍵字命名，會覆蓋系統的字體，可能對代碼維護形成必定的困擾，須要注意一下。

2.src

src表示引入的字體資源。既然是資源，確定包括內部資源和外部資源。src屬性給內部資源和外部資源的引入方式作了區分，若是須要引入內部資源，須要用local()功能符，若是是外鏈字體，則使用url()功能符。

若是你看到local功能符，通常是爲了偷懶，如我想把'Microsoft Yahei'簡寫成'YH'，就能夠給內部資源重命名一下，以下

@font-face{
    font-family: YH;
    src: local("Microsoft Yahei");
}
複製代碼

引入外部資源的時候，還有一個搭配的功能附，format()，這個format是用於系統解析字體包以前判斷字體包的格式的，經常使用的字體包格式有eot,ttf,woff2,woff等，所以在系統解析字體包以前聲明一下字體包的格式能縮短一些解析時間，可能只是極短的時間，所謂聚沙成塔，多寫幾個字母也不會佔用你多久。在引入外部資源的時候，建議的寫法以下:

@font-face{
    font-family: 'example';
    src: url("example.ttf") format('ttf');
}
複製代碼

3.font-style和font-weight

剛纔我在講font-weight和font-style的時候都提到了系統字體的概念，即在什麼樣式下該用什麼樣的字體，若有些英文字體在聲明斜體後就會有專門的傾斜字體，而不是字體傾斜一個角度。所以@font-face能夠在你使用該自定義字體的時候，在聲明瞭對應的font-style/font-weight的時候，使用該字體，聽起來有點繞口，來一個具體實例，假設你聲明瞭幾個@font-face以下：

@font-face{
    font-family: 'example';
    src: url("example100.ttf") format('ttf');
    font-weight:100;
}
@font-face{
    font-family: 'example';
    src: url("example200.ttf") format('ttf');
    font-weight:200;
}
@font-face{
    font-family: 'example';
    src: url("example300.ttf") format('ttf');
    font-weight:300;
}
複製代碼

這幾個font-face的名字都是example，但並不會產生覆蓋，由於這些自定義字體須要在特定的條件下才會生效，這個特定條件在你定義這個字體的時候就已經規定好了，即font-weight。所以若是你用下面的寫法，這個自定義字體就不會生效

<p>我想用自定義字體</p>
<style> p{ font-family:'example'; } </style>
複製代碼

未生效的緣由是沒找到對應的font-face變量，你必須聲明一個有效的font-weight才能夠，以下寫法：

<p>我想用自定義字體example200</p>
<style> p{ font-family:'example'; font-weight:200 } </style>
複製代碼

font-style和font-weight同理，有興趣的能夠本身實驗。CSS的font部分的探究就到此爲止了，下半章會圍繞文本處理屬性展開，以爲此文有用的點個贊吧~

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。