CSS中的「雲端字型（Web Fonts）」指的是透過網路加載並應用於網頁的字體，而非依賴用戶端本地安裝的字體。這樣的字型使得開發者可以使用更豐富、多樣的字體，無需擔心用戶的設備是否安裝了所需字型。

使用雲端字型的好處

1. 視覺一致性：無論用戶使用哪種設備或瀏覽器，網頁呈現的字型樣式始終如一，增強了網站的品牌識別。
2. 豐富的設計選擇：開發者可以選擇不同的字體來搭配網站風格，不再受限於標準的系統字體。

引入雲端字型的方法

有兩種常見的方式來在CSS中使用雲端字型：透過@font-face規則自定義字型，或是使用像Google Fonts這樣的第三方字型服務。

1. @font-face規則

@font-face允許你指定字型檔案的URL，然後將其應用到網頁中。以下是簡單的範例：

@font-face {
    font-family: 'MyCustomFont';
    src: url('https://example.com/fonts/my-custom-font.woff2') format('woff2'),
         url('https://example.com/fonts/my-custom-font.woff') format('woff');
}

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

2. 使用Google Fonts

Google Fonts是一個免費的字型庫，提供了多種Web Fonts。你可以通過在HTML文件中加入一行連結來使用：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

然後在CSS中設置字型：

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

注意事項

1. 字型加載時間：雲端字型需要通過網路加載，可能會影響頁面加載速度。可以使用font-display來控制字型加載策略，例如swap可以避免“無字體”狀態。
2. 字型格式：為了兼容不同瀏覽器，應提供多種格式（如WOFF、WOFF2、TTF）。

通過這些方法，開發者可以在網頁設計中靈活使用各種雲端字型，增強視覺效果。