我正在尝试添加一个自定义字体到一个使用顺风的React项目。
我已经添加了字体-时间-标题-媒体。Woff2到/public，修改如下:
node_modules祝辞tailwindcss祝辞tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "tiempos-headline";
src: local('tiempos-headline'), url("tiempos-headline-medium.woff2") format("woff2");
font-weight: 600;
}
tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {
colors: {
brand: {
'pink-link': '#FB335A',
'pink': '#FB335A',
300: '#000000',
400: '#f8f8f8',
500: '#000000',
600: '#000000',
700: '#000000',
}
},
animation: {
loading: 'rotate 1s linear infinite',
}
},
fontFamily: {
sans: ['aktiv-grotesk', 'sans-serif'],
serif: ['tiempos-headline', 'serif'],
},
},
plugins: [],
}
但是字体没有显示-它显示的只是一个衬线-任何想法我哪里出错了?
- 首先确保在css的
font-face指令中字体的路径是正确的文件。
文件结构如下:
root_project
| tailwind.config.js
| node_modules
| src
| public
| __ images
| __ tiempos-headline-medium.woff2
...
用绝对路径书写你的css路径:url("/tiempos-headline-medium.woff2")
- 在
tailwind.config.js文件中，将指令fontFamily: {}移动到extend: {}对象中以添加字体和扩展字体配置
💡如果你想要覆盖完全默认字体，移动指令fontFamily: {}到theme: {}对象。
根据您的设置配置示例:
- style.css
/* as the .woff2 file is in the public dir, we use absolute path "/" */
@font-face {
font-family: 'tiemposHeadline';
src: url('/tiempos-headline-medium.woff2') format('woff2');
font-weight: 600;
}
- tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {
fontFamily: { // we name our custom font "tiempos"
tiempos: ['tiemposHeadline', 'serif'],
},
},
},
plugins: [],
}
- 组件中的
export default function Home() {
return (
<h1 className="font-tiempos">Custom Font</h1>
);
首先将它作为链接包含在我的index.html文件中，你可以看到poppins
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bhrugu Tundeliya</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
这就是我对顺风的做法
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./src/**.{js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
'react-color': '#61DBFB',
},
backgroundImage: {
Icsun: "url('./src/asset/sunny.png')",
Icmoon: "url('./src/asset/half-moon.png')",
},
fontFamily: {
poppins: ['poppins', 'sans-serif'],
},
animation: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
},
},
},
plugins: [],
}
和我到处使用的通用文本组件
export const Text = ({
children,
className,
onMouseLeave,
onMouseDown,
onMouseEnter,
onMouseUp,
}: TextProps) => {
return (
<label
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
onMouseUp={onMouseUp}
className={`font-poppins ${className}`}
>
{children}
</label>
)
}
，它工作得很好…你也可以在CSS的主体中添加香料。我喜欢控制所有的文本，所以我总是创建一个组件。