在網頁設計中，字體的選擇和排版是至關重要的。默認情況下，網頁使用操作系統中預裝的字體來顯示文本信息。但是，這可能會在不同的設備和瀏覽器中導致不同的文本顯示效果。因此，在網頁中引用外部字體是一個優秀的解決方案。 在CSS中，使用@font-face規則可以調用外部字體。例如，可以使用以下代碼來調用Google Fonts中的Roboto字體：

@font-face {
font-family: 'Roboto';
src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
}

在上面的代碼中，我們使用了'Roboto'作為字體的名稱，并使用Google Fonts提供的鏈接來作為源文件。這個鏈接中包含了字體的名稱以及其他必要信息。 在將字體導入到CSS文件中后，我們可以在樣式表中使用這個特定的字體。例如：

p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}

在上面的代碼中，我們將字體族設置為'Roboto'。如果在用戶的瀏覽器中找不到該字體，將會默認使用sans-serif字體族中的任何一個字體。 需要注意的是，外部字體文件的大小會影響網頁加載的速度。因此，我們應該選取尺寸較小的字體文件并將它們緩存起來以提高網頁加載速度。 總之，在CSS中調用外部字體是一個非常方便的工具，可以提高網頁顯示效果和可讀性。了解如何使用@font-face規則可以讓我們更好地掌握CSS技能。