CSS 中的字體設置對于網頁設計來說十分重要，因為正確的字體選擇可以為網站增加可讀性、可訪問性和美觀度。然而，在 CSS 中使用字體也可能面臨一些挑戰，比如網頁中使用的字體可能無法在所有設備和瀏覽器上呈現。為了應對這個問題，CSS 提供了一種叫做字體包的技術，可以幫助我們解決多數字體的兼容性問題。

@font-face {
font-family: 'Custom Font';
src: url('font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

上面的代碼片段展示了如何在 CSS 中使用自定義字體。我們可以用 font-family 屬性指定字體名稱，用 src 屬性指定字體包的路徑。在這個例子中，字體包是 font.ttf 文件，它的格式被指定為 TrueType。字體的權重和風格屬性可以用 font-weight 和 font-style 屬性指定。

在實際應用中，我們經常為不同的字體權重和樣式定義不同的字體包。下面的代碼片段展示了一個具有多個字體包的 @font-face 規則的示例：

@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
 }
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
 }
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
 }
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
 }

在這個例子中，我們定義了四個 @font-face 規則，每個規則為不同的字體權重和風格屬性定義了一個字體包。所有的字體包都使用 Open Sans 字體名稱。這個字體家族現在可以在 CSS 中使用，如下所示：

.custom-text{
font-family: 'Open Sans';
font-weight: bold;
font-style: italic;
 }

通過這種方式，我們可以確保網站上選擇的字體都能在不同設備和瀏覽器中呈現，而不會因為缺少字體文件而顯示默認字體。