假設你已經設定好了使用Tailwind CSS的應用程式,你將擁有一個包含以下內容的CSS檔案:
@tailwind base;
@tailwind components;
@tailwind utilities;
你可以前往Google Fonts網站,選擇一個字體,並且會提供你一個用於匯入該字體的CSS @import
。
舉個例子,如果你選擇了Inter字體以及各種字重,將會獲得以下的@import
語句:
@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');
將這段語句加入到CSS檔案中,並且再加上以下內容:
@layer base {
html {
font-family: Inter, system-ui, sans-serif;
}
}
最終,你的CSS檔案會變成這樣:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');
@layer base {
html {
font-family: Inter, system-ui, sans-serif;
}
}
現在你的預設字體就是Inter字體了,你可以使用font-bold
或者font-medium
來設置不同大小的字體。