為什么谷歌字體不能與引導程式一起使用？-有解無憂

Google 字體不適用于引導程式。我在我的網站上使用 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/[email protected]/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/[email protected]/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在這里

嘗試的解決方案：

Google 字體不適用于 bootstrap這對我不起作用
嘗試谷歌搜索......沒有解決方案。

uj5u.com熱心網友回復：

您可以通過更改源 SASS 檔案或通過覆寫框架使用的CSS 變數來覆寫 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/[email protected]/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>

uj5u.com熱心網友回復：

你所做的一切都是正確的。直到你的 CSS。你的身體上有“poppins”字體，但你的字體Hello World來自你的標題。嘗試添加!important;您的 CSSbody和*元素選擇器。

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  !important;
  }

* {
  font-family: 'Poppins', sans-serif  !important;
}

/* 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 !important;
}

header {
  background-color: antiquewhite;
  text-align: center;
  padding: 10px;
}

* {
  font-family: 'Poppins', sans-serif !important;
}

<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

*selector 表示所有元素，但在覆寫更具體的選擇器時將位于屬性鏈的底部。

請注意，!important 標志會將 * 的字體樣式呈現??為絕對的，即使已使用其他選擇器來設定文本（例如，正文或可能是 ap）。

uj5u.com熱心網友回復：

這對我來說是如何作業的。

*{
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    outline: none;

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index-html.css">
 
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap" rel="stylesheet">

    <title>Stackoverflow Answer</title>
</head>
<body>
  <h1>Google Fonts Imported </h1>
  
    <script rel="preconnect" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360126.html

標籤：html css 推特引导谷歌字体

上一篇：<hr>:after放置元素之前

下一篇：在React組件的文本輸入中放置一個圖示