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

Question

我有一个基本的 bootstrap 导航栏，里面有一个品牌。我的 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 吗？欢迎所有提示！

Answer 1

就用font-size: 100px !important;希望对你有所帮助。

Answer 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>

Answer 3

您可以执行如下操作。它不仅会使您的 brand-name 成为 link，还会使它成为标题。使用不同的标题标签轻松更改字体大小（将 h1 更改为 h2、h3 等）。它对搜索引擎也很有效。

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

Answer 4

对于 Bootstrap > 5 你可以使用：

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

您有更多信息：Getbootstrap

希望你觉得有用

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

How to increase Bootstrap navbar-brand font-size?

html

css

fonts

font-size

twitter-bootstrap