如何增加Bootstrap navbar-brand font-size？
kra*_*r65 2 html css fonts font-size twitter-bootstrap
我有一个带有品牌的基本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品牌？欢迎所有提示!
小智 8
您可以执行以下操作。它不仅会使您的品牌名称成为一个链接，而且还会使其成为一个标题。通过使用不同的标题标签轻松更改字体大小（将 h1 更改为 h2、h3 等）。这对于搜索引擎来说也将是高效的。
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>
font-size属性指定字体的大小或高度.font-size不仅会影响应用它的字体,还会用于计算em,rem和ex length单位的值.
演示
尝试这样
.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>