Google 字体无法与 bootstrap 一起使用。我在我的网站上使用 Google 字体和 Bootstrap，但 google 字体似乎不起作用。一旦我注释掉 Bootstrap CSS，Google 字体就会再次出现。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110e110c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289968994" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
和CSS:
/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
尝试过的解决方案:
- Google font not working with bootstrap这对我不起作用
- 尝试用谷歌搜索...没有解决方案。
最佳答案
您可以通过更改源 SASS 文件或覆盖 CSS variables 来覆盖 Bootstrap 主题。由框架使用。
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6d9c6db" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>关于html - 为什么谷歌字体不能与 bootstrap 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70022328/