英文:
React JS - How can I change fonts family on a specific page?
问题
在我开发的React应用程序中，我通常使用Ubuntu字体。我只想在登录和注册页面上使用Nunito字体。例如，我展示了我的登录页面。我想要更改此卡中的所有文本样式，如表单项、按钮、标题（h1），我该如何做？
return (
<div className="centerItems login">
<Button
className="back-to-home"
href="https://www.example.com/"
type="default"
icon={<HomeOutlined />}
size="medium"
/>
<Card className="login-card">
<div className="centerItems">
<Image preview={false} width={200} src={logo} />
<h1 style={{ marginBottom: 8 }}>Login</h1>
</div>
<div className="login-form">
<LoginForm className="centerItems" />
</div>
</Card>
</div>
);
如何更改所有文本样式，如表单项、按钮、标题（h1）等，您可以在相应的CSS文件中定义样式并将其应用于所需的元素。您可以使用CSS的font-family属性来指定使用的字体，例如：
.login-card {
font-family: 'Nunito', sans-serif;
}
/* 样式其他元素，例如表单项和按钮 */
请确保在项目中引入Nunito字体，并在CSS中正确指定其字体名称。
英文:
In the react application I developed, I generally use the ubuntu font. I just want to use nunito font for login and register page. As an example, I showed my login page. I want to change all kinds of text styles such as form items, buttons, titles (h1) in this card, how can I do this?
return (
<div className="centerItems login">
<Button
className="back-to-home"
href="https://www.example.com/"
type="default"
icon={<HomeOutlined />}
size={"medium"}
/>
<Card className="login-card">
<div className="centerItems">
<Image preview={false} width={200} src={logo} />
<h1 style={{ marginBottom: 8 }}>Login</h1>
</div>
<div className="login-form">
<LoginForm className="centerItems" />
</div>
</Card>
</div>
);
答案1
得分: 2
无需编写任何脚本。您可以仅使用CSS来实现。由于您在包装器中有 .login 类，请确保在注册表单中也有唯一的类名，然后可以像这样添加CSS，
.login * {
font-family: <your-fontfamily>
}
.register * {
font-family: <your-fontfamily>
}
[或者]
如果您可以根据当前所在页面使用路由逻辑在 <body> 标签本身中添加类，则可以像这样将 font-family 添加到具有您添加的类名的 body 标签。
考虑我使用基于路由逻辑向 body 添加的类名是 nunito-font
body.nunito-font {
font-family: <your-fontfamily>
}
英文:
No need to write any scripts.
You can do it with CSS alone. Since you have the .login class in the wrapper ensure that you also have the unique class name in the register form and then you can add the CSS like this,
.login * {
font-family: <your-fontfamily>
}
.register * {
font-family: <your-fontfamily>
}
[OR]
If you can able to add class in the <body> tag itself by using router logic based on which page you currently are then you can add the font-family to the body tag with the class name you added. like this
Consider that class name I added using router logic to body is nunito-font
body.nunito-font {
font-family: <your-fontfamily>
}
答案2
得分: 0
你需要导入CSS文件并选择要使用的字体数量。示例 [添加多个字体](https://codesandbox.io/s/runtime-sunset-n1ltsq)
```css
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pangolin&family=Roboto&display=swap");
我选择了三种字体，你可以将它们应用到HTML上。
document.documentElement.style.fontFamily = "Pangolin";
如果你想应用到body标签上：
document.body.style.fontFamily = "Pangolin";
然后在你的根App组件中，创建一个函数根据URL添加字体，以下是我的示例：
useEffect(() => {
addFontBasedOnRoute();
}, [pathname]);
const addFontBasedOnRoute = useCallback(() => {
switch (pathname) {
case "/":
document.documentElement.style.fontFamily = data[0];
break;
case "/about":
document.documentElement.style.fontFamily = data[1];
break;
case "/blog":
document.documentElement.style.fontFamily = data[2];
break;
default:
break;
}
}, [pathname]);
<details>
<summary>英文:</summary>
you will need to import css file how many fonts, you want to use. example [add multiple fonts](https://codesandbox.io/s/runtime-sunset-n1ltsq)
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pangolin&family=Roboto&display=swap");
I chose three fonts. and you can add to apply html
document.documentElement.style.fontFamily = "Pangolin";
if you want to apply body tag
document.body.style.fontFamily = "Pangolin";
and at your root App component. make a fun to add based on the url here is my example
useEffect(() => {
addFontBasedOnRoute();
}, [pathname]);
const addFontBasedOnRoute = useCallback(() => {
switch (pathname) {
case "/":
document.documentElement.style.fontFamily = data[0];
break;
case "/about":
document.documentElement.style.fontFamily = data[1];
break;
case "/blog":
document.documentElement.style.fontFamily = data[2];
break;
default:
break;
}
}, [pathname]);
</details>
# 答案3
**得分**: 0
有两种方法可以实现你想要的效果。
我将假设你的登录页组件文件是 "LoginPage.js"。
由于登录页和注册页的方法相同，我只会展示如何在登录页中实现它。
## 通过导入单独的 CSS 文件 ##
1. 在你的 LoginPage.js 中，添加 `import './LoginPage.css'`（假设 CSS 文件与 LoginPage.js 在同一页面上）。
2. 在那里添加你的样式。
### 这是一个示例 ###
在你的 LoginPage.js 中，返回类似这样的内容 -
```javascript
import "./LoginPage.css";
export default function LoginPage() {
return <div className="LoginPage-container"></div>;
}
然后在你的 LoginPage.css 中 -
.LoginPage-container {
background-color: black;
font-family: "Nunito";
}
.LoginPage-container h1 {
/* 在此处添加登录页 h1 的样式 */
}
通过为你的组件添加 className
当你在主文件中调用你的组件时，像这样为它添加一个 className -
import LoginPage from "./pages/LoginPage.js";
return (
<LoginPage className="LoginPage-container" />
);
然后在你的主 CSS 文件中使用 className "LoginPage-container" 进行样式设置（就像上一个示例中一样）。
英文:
There are two ways to achieve what you want.
I'm going to be assuming your loginpage component file is "LoginPage.js"
Since the methods for both loginpage and registerpages are the same I'm only going to show how to do it for the loginpage.
By importing induvidual css files
- In your LoginPage.js, add
import './LoginPage.css( Assuming the css file is in the same page as the LoginPage.js ) - Add your styles there
Here is an example
In your LoginPage.js, return something like this -
import "./LoginPage.css"
export default function LoginPage() {
return <div className="LoginPage-container"></div>
}
And in your LoginPage.css -
.LoginPage-container {
background-color: black;
font-family: "Nunito";
}
.LoginPage-container h1 {
/*Styles for loginpage h1 here*/
}
By giving your component a className
When you call your component in your main file, add a className to it like so -
import LoginPage from "./pages/LoginPage.js"
return (
<LoginPage className="LoginPage-container" />
);
Then style it in your main css file using the className "LoginPage-container" ( Like in the last example )
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论