W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
控制元素字體序列的功能類。
Class
|
Properties
|
---|---|
font-sans | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
font-serif | font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; |
font-mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
使用 ?font-sans
? 應用一個網(wǎng)絡安全的無襯線字體系列:
<p class="font-sans ...">
The quick brown fox jumps over the lazy dog.
</p>
使用 ?font-serif
? 來應用網(wǎng)絡安全的襯線字體系列:
<p class="font-serif ...">
The quick brown fox jumps over the lazy dog.
</p>
使用 ?font-mono
? 來應用一個網(wǎng)絡安全的等寬字體系列:
<p class="font-mono ...">
The quick brown fox jumps over the lazy dog.
</p>
要在特定的斷點處控制元素的字體序列,請在任何現(xiàn)有的字體序列功能類前添加 ?{screen}:
? 前綴。例如,使用 ?md:font-serif
? 來僅在中等大小及以上的屏幕應用 ?font-serif
? 功能類。
<p class="font-sans md:font-serif">
<!-- ... -->
</p>
關于 Tailwind 的響應式設計功能的更多信息,請查看 響應式設計 文檔。
默認情況下,Tailwind 提供三種字體系列實用程序:跨瀏覽器無襯線堆棧、跨瀏覽器襯線堆棧和跨瀏覽器等寬堆棧。您可以通過編輯 Tailwind 配置的 ?theme.fontFamily
? 部分來更改、添加或刪除這些。
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
'mono': ['ui-monospace', 'SFMono-Regular', ...],
'display': ['Oswald', ...],
'body': ['"Open Sans"', ...],
}
}
}
字體序列可以指定為一個數(shù)組或一個簡單的逗號分隔的字符串:
{
// Array format:
'sans': ['Helvetica', 'Arial', 'sans-serif'],
// Comma-delimited format:
'sans': 'Helvetica, Arial, sans-serif',
}
請注意,Tailwind 不會自動為您轉義字體名稱。如果您使用的字體包含無效的標識符,請用引號包住它或轉義這些無效的字符。
{
// Won't work:
'sans': ['Exo 2', ...],
// Add quotes:
'sans': ['"Exo 2"', ...],
// ...or escape the space:
'sans': ['Exo\\ 2', ...],
}
默認情況下, 針對 font family 功能類,只生成 responsive 變體。
您可以通過修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?fontFamily
?屬性來控制為 font family 功能生成哪些變體。
例如,這個配置也將生成 hover and focus 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
fontFamily: ['hover', 'focus'],
}
}
}
如果您不打算在您的項目中使用 font family 功能,您可以通過在配置文件的 ?corePlugins
?部分將 ?fontFamily
?屬性設置為 ?false
?來完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
fontFamily: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: