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 length单位的值。 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

您可以执行以下操作。它不仅会使您的品牌成为一个链接，而且还会成为一个标题。它对搜索引擎也很有效。

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

如何增加Bootstrap navbar-brand font-size？

3 个答案: