CSS font-face 自定義網頁字體

一、引入自定義字體

使用CSS提供的font-face屬性，可以在網頁上自定義引用字體。

在CSS中定義@font-face，可定義字體名稱、字體文件地址、字體格式以及字體屬性等信息。

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

font-family用於定義自定義字體的名稱，之後在文本樣式中使用該名稱即可使用自定義字體。

src用於定義字體文件地址和格式。為了兼容性，推薦同時定義多種格式的字體文件。

font-weight和font-style用於定義字體的粗體和斜體屬性。

二、設置自定義字體

在實際使用中，可以通過CSS選擇器為元素設置字體，同時引用自定義字體。

body {
  font-family: 'MyFont', sans-serif;
}

在上述例子中，為網頁中所有文本設置了自定義字體。由於不是所有用戶都會下載並安裝了自定義字體，推薦在font-family後添加備用字體，以免字體無法正常顯示。

三、自定義字體屬性

自定義字體不僅僅只是設置字體名稱和字體細節，也可以通過CSS調整字體屬性，實現更多的自定義效果。

通過屬性font-variant可以實現自定義字體的大小寫樣式，如果自定義字體本身不支持小寫字母，可以使用該屬性設置大小寫字母的樣式。

h1 {
  font-variant: small-caps;
}

通過屬性font-stretch可以調整字體的拉伸程度，支持值normal、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded。

h2 {
  font-stretch: expanded;
}

通過屬性letter-spacing和word-spacing可以調整字母和詞語之間的間距。

p {
  letter-spacing: 1px;
  word-spacing: 5px;
}

其他常用的字體屬性還包括line-height（行間距）、text-transform（文本轉換，大寫或小寫）等等。

四、結語

通過使用CSS的@font-face屬性以及自定義字體屬性，可以實現更加個性化的網頁字體效果，提高網頁的視覺美觀度和閱讀體驗。