Web字體在CSS中的使用方法詳解

一、選擇正確的字體格式

為了在網頁中使用Web字體，我們需要先選擇正確的字體格式，通常有三種格式可選：TrueType（.ttf）、OpenType（.otf）和Web Open Font Format（.woff）。推薦使用woff格式，因為它是一種被廣泛支持的格式，在大多數現代瀏覽器中都可以很好地使用。

在選擇字體格式時，還需要考慮字體的版權問題，確保使用的字體具有商業使用授權或是可免費使用的開源授權，避免版權糾紛。

二、字體文件的引入方式

在選擇了合適的字體文件後，我們需要將其引入到網頁中。有兩種常見的引入方式：

使用@font-face聲明

  
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

在上面的代碼中，我們使用@font-face聲明了一個自定義的字體，指定了字體家族名稱為”MyWebFont”，同時通過src屬性指定了woff2和woff兩種格式的字體文件路徑。在使用時，只需要將字體家族名稱作為CSS屬性值即可。

使用標籤引入外部字體

上面的代碼中，我們使用標籤從外部資源庫引入了Google Fonts中的一種字體，類似於使用CDN引入的方式。

三、在CSS中使用Web字體

引入字體文件後，我們需要在CSS樣式中使用它們。下面是幾種常見的方式：

使用font-family屬性

  
h1 {
  font-family: 'MyWebFont', sans-serif;
}

在上面的樣式中，我們使用font-family屬性指定了Web字體的家族名稱，以及一個後備的sans-serif字體，當Web字體無法使用時，瀏覽器會自動使用後備字體。

使用font-weight屬性

  
h1 {
  font-family: 'MyWebFont', sans-serif;
  font-weight: 400;
}

在上面的樣式中，我們使用font-weight屬性指定了字體的粗細程度。通常情況下，Web字體提供了多個粗細程度的字形，我們可以根據需要進行選擇。

使用@font-face指定不同文字的字形

  
@font-face {
  font-family: 'MyWebFont-Regular';
  src: local('MyWebFont-Regular'), url('MyWebFont-Regular.woff') format('woff');
}

@font-face {
  font-family: 'MyWebFont-Bold';
  src: local('MyWebFont-Bold'), url('MyWebFont-Bold.woff') format('woff');
}

h1 {
  font-family: 'MyWebFont-Bold', sans-serif;
  font-weight: bold;
}
p {
  font-family: 'MyWebFont-Regular', sans-serif;
}

在上面的樣式中，我們使用@font-face指定了兩個字體家族名稱，分別對應普通和加粗兩種字形。在使用時，我們根據需要選擇合適的字體家族名稱和字體粗細程度即可。