目前我正在我的風格標簽中這樣做@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}但我下載了 Roboto 字體，并想知道如何配置 Tailwind 以在所有元素上全局使用這些文件和字體。邊注：我正在使用 Vuejs 并按照此處有關如何為 Vue 設置 Tailwind 的指南進行操作https://www.youtube.com/watch?v=xJcvpuELcZo
5 回答
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
用@layer加載本地字體的指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
? @font-face {
? ? font-family: Proxima Nova;
? ? font-weight: 400;
? ? src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
? }
? @font-face {
? ? font-family: Proxima Nova;
? ? font-weight: 500;
? ? src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
? }
}
皈依舞
TA貢獻1851條經驗 獲得超3個贊
如果 Tailwind 作為項目的依賴項安裝，您可以使用npm install tailwindcss
腳步：
復制下載的字體并將其放入
fonts項目內的文件夾中。運行
npx tailwind init，生成一個空的tailwind.config.js在里面
tailwind.config.js添加并指定要覆蓋的字體系列（Tailwind 的默認系列是）。將新添加的字體系列放在開頭（順序很重要）fontFamilyextendsans
module.exports = {
? theme: {
? ? extend: {
? ? ? fontFamily: {
? ? ? ? 'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
? ? ? }
? ? },
? },
? variants: {},
? plugins: []
}
重要提示：使用extend將添加新指定的字體系列，而不會覆蓋 Tailwind 的整個字體堆棧。
然后在主tailwind.css文件（導入所有 tailwind 功能的位置）中，您可以導入本地字體系列。像這樣：
@tailwind base;
@tailwind components;
@font-face {
? font-family: 'Roboto';
? src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}
@tailwind utilities;
現在重新編譯 CSS。如果您遵循Tailwind 的文檔，這通常是使用postcss完成的：
postcss?css/tailwind.css?-o?public/tailwind.css
如果您不使用 postcss，您可以運行：
npx?tailwindcss?build?css/tailwind.css?-o?public/tailwind.css
現在應該呈現新添加的字體系列。
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
我的方式，完整的插件風格，一種本地字體，一種 https 字體，不需要 @import，不需要<link>：
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans],
'damion': ['Damion'],
}
}
},
variants: {
extend: {},
},
plugins: [
plugin(function ({ addBase }) {
addBase({
'@font-face': {
fontFamily: 'Red Hat Display',
fontWeight: '300',
src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'
}
})
}),
plugin(function ({ addBase }) {
addBase({
'@font-face': {
fontFamily: 'Damion',
fontWeight: '400',
src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'
}
})
}),
],
}
慕容森
TA貢獻1853條經驗 獲得超18個贊
1 - 將下載的字體提取到文件 ex 中./fonts
2 - 在同一文件夾中創建樣式表并添加以下代碼：
@font-face {
font-family: 'x-font-name';
src: local('x-font-name'), local('x-font-name'),
url('x-font-name.woff2') format('woff2'),
url('x-font-name.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3 - 將樣式表導入到 input.css 中，其中您已經擁有基礎、組件和實用程序，例如：
@import url('./assets/fonts/stylesheet.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
4 - 轉到 tailwind 配置文件并將字體添加到主題擴展 ex ：
theme: {
extend: {
fontFamily: {
'FontName': ['x-font-name','Roboto'],
'FontName-2': ['x-name-2','Roboto']
},
},
},
5 - 在 HTML ex 中使用它：class="font-FontName"
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
第 1 步：下載字體并將其保存在本地您轉到右上角的“下載系列”按鈕，您將獲得一個具有不同字體粗細的 zip 或文件夾。從我們下載的文件中，我們將文件static/Oswald-Bold.ttf 移動到我們創建的新文件夾 /dist/fonts/Oswald。
步驟 2：本地導入字體在@layer base內的tailwind.css 以及我們添加的標題上方：
@font-face {
font-family: Oswald;
src: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format("truetype") or ttf;
如果我們現在運行npm run watch，字體系列會立即編譯到 styles.css 中，如果我們搜索“Oswald”，我們會得到： 提示：如果出現問題，您可以單擊中的鏈接按住“CTRL”鍵查看URL，看看路徑是否正確！
**步驟 3：** 擴展 Tailwindcss 主題 在tailwind.config.js 中，我們在“主題”和“擴展”下添加：
theme: {
extend: {
fontFamily: {
headline: ['Oswald']
}
},
“標題”這個名字可以在這里自由選擇！
- 5 回答
- 0 關注
- 537 瀏覽
添加回答
舉報
0/150
提交
取消