为什么当我在 next js 13 中使用输入或按钮标签时我的字体不起作用？

Question

我正在 next js 13 创建测试站点，并且有一个登录页面。我在其中使用输入和按钮标签，但问题是我的字体不适用于输入和按钮。有谁知道这与什么有关？

'use client'

import { signIn } from "next-auth/react"
import '../../globals.css'

export default function Providers({ providers }) {

    return (
        <div style={{ 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' }} >
            <div className="login-card" >
                <h1>Log-in</h1>
                <form className="email-form" method="post" action="/api/auth/signin/email">
                <input className={"email-input"} placeholder="email" type="text" id="email" name="email" onChange={e => setEmail(e.target.value)} />
                <button className="email-btn" onClick={() => signIn('email', { callback: '/', email })} type="submit" >Sign in</button>
                <button className="google-btn" onClick={() => signIn(providers.google.id)}>
                    Google
                </button>
            </form>
            </div>
        </div>
    )

}

CSS

.login-card {
background: #E8DFCA;
max-width: 600px;
max-height: 360px;
border-radius: 16px;
padding: 54px 67px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}

.login-card h1 {
margin-bottom: 38px;
font-weight: 700;
font-size: 64px;
line-height: 76px;
color: #AEBDCA;
}

.email-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.email-input {
width: 100%;
margin-bottom: 40px;
padding: 8px 0px 8px 15px;
font-family: 'Rubik';
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: #F5EFE6;
background: #7895B2;
border-radius: 8px;
border: none;
}

.email-btn {
width: 48%;
padding: 8px 70px;
background-color: #7895B2;
color: #F5EFE6;
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
border: none;
border-radius: 8px;
transition: 0.3s;
}

.email-btn:hover {
background-color: #F5EFE6;
color: #7895B2;
transition: 0.3s;
cursor: default;
}

.google-btn {
width: 48%;
background-color: #AEBDCA;
color: #F5EFE6;
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
border: none;
border-radius: 8px;
transition: 0.3s;
}

.google-btn:hover {
background-color: #F5EFE6;
color: #7895B2;
transition: 0.3s;
cursor: default;
}

用户界面

我使用新的@next/font/google 将字体添加到layout.jsp。然后我尝试在login.jsx中单独添加字体，但没有成功。

Answer 1

您可以在全局样式中使用inheritasfont-family值来覆盖默认应用于按钮和输入的用户代理样式表：

button, 
input {
    font-family: inherit;
}