引导字体在反应中有所不同
Posted
技术标签:
【中文标题】引导字体在反应中有所不同【英文标题】：Bootstrap font is different in react 【发布时间】：2019-02-24 08:41:37 【问题描述】：我想使用引导程序制作登录页面并做出反应。我使用来自官方页面的以下style。我在 index.html 文件中添加了这些所有引导程序和 css 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
但结果与我通过常规 html 页面打开时不同。字体不同。
应该是这样的：
这就是我所拥有的：
我不明白为什么，因为我没有更改 css 文件...
【问题讨论】：
【参考方案1】：这可能是index.js 文件的问题。在那里你删除导入index.css 行。
删除index.js文件中的这一行。
import './index.css';
【讨论】：
【参考方案2】：在引导程序从 BS 重写 CSS 样式规则或引导程序 CSS 文件未加载后，您可能会加载另一个 CSS 文件，请在控制台或浏览器中检查它首先应用了哪个文件的样式
【讨论】：
【参考方案3】：你可以用重要的东西来支配；
示例：
font-family: 'Lilita One'!important;
【讨论】：
以上是关于引导字体在反应中有所不同的主要内容，如果未能解决你的问题，请参考以下文章