如何增加 Bootstrap navbar-brand 字体大小？答案

【问题标题】：How to increase Bootstrap navbar-brand font-size?如何增加 Bootstrap navbar-brand 字体大小？
【发布时间】：2016-04-04 07:47:40
【问题描述】：

我有一个带有品牌的基本引导导航栏。我的 html 的开头如下所示：

<div class="wrapper">
    <div class="navbar navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">MyAwesomeCompany</a>
                etc.

看起来像这样：

我现在想把字体改成Lato并增加字体，所以我在<head>中添加了以下内容：

<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
.navbar-brand
{
  font-family: 'Lato', sans-serif;
  color:grey;
  font-size: 100px;
  margin: 0px;
}
</style>

但现在看起来像这样：

正如您在 css 中看到的，我尝试将字体大小增加到 100 像素，但它仍然很小。有谁知道我可以做些什么来增加品牌的font-size？欢迎所有提示！

【问题讨论】：

能否提供代码进行测试
尝试添加 !important 正如 Rahul 在他的回答中所说的那样，它会覆盖您要重新编辑的类的样式，但不会覆盖所有类，只会覆盖您用“！important”编写的属性
它的工作jsfiddle.net/MadhawaMB/m2fkLrtf

标签： html css twitter-bootstrap fonts font-size

【解决方案1】：

只需使用font-size: 100px !important;，希望对您有所帮助。

【讨论】：

还要考虑相对大小，例如font-size:6.25rem。
我正在看一个教程....font-size: 100px 对他有用，但对我没有用。使用 font-size: 100px !important 为我工作。为什么会这样？
不工作，也太尼安德特人的解决方案，我使用引导程序，所以我不写不必要的 css

【解决方案2】：

font-size 属性指定字体的大小或高度。 font-size 不仅影响应用它的字体，还用于计算 em、rem 和 ex 长度单位的值。 Demo 这样试试

.navbar-brand
{
  font-size: 100px;
}

绝对关键字和值

.navbar-brand
    {
      font-size: larger;
    }

它接受以下绝对关键字值：

xx-small

x-small

small

medium

large

x-large

xx-large

h1 {
    font-size: 250%;
}

h2 {
    font-size: 200%;
}

p {
    font-size: 100%;
}

<h1>MyAwesomeCompany</h1>
<h2>MyAwesomeCompany</h2>
<p>MyAwesomeCompany</p>

【讨论】：

【解决方案3】：

您可以执行以下操作。它不仅会使您的品牌名称成为链接，而且还会使其成为标题。通过使用不同的标题标签（将 h1 更改为 h2、h3 等）轻松更改字体大小。它对搜索引擎也很有效。

<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>

【讨论】：

【解决方案4】：

对于 Bootstrap > 5，您可以使用：

<span class="navbar-brand mb-0 h1 fs-2">Your Brand</span>

您有更多信息：Getbootstrap

希望对你有用

【讨论】：