Html 如何增加 Bootstrap 导航栏品牌字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34527775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase Bootstrap navbar-brand font-size?
提问by kramer65
I've got a basic bootstrap navbar with a brand in there. The start of my html looks like this:
我有一个基本的引导导航栏，里面有一个品牌。我的 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.
which looks like this:
看起来像这样：
I now want to change the font to Latoand increase the font, so I added the following to the <head>:
我现在想将字体更改为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>
but now it looks like this:
但现在看起来像这样：
As you can see in the css I tried increasing the font-size to 100 pixels, but it stays so small. Does anybody know what I can do to increase the font-sizeof the brand? All tips are welcome!
正如您在 css 中看到的，我尝试将字体大小增加到 100 像素，但它仍然很小。有谁知道我可以做些什么来增加font-size品牌？欢迎所有提示！
回答by Rahul Kashyap
Just use font-size: 100px !important;hope this will be helpful for you.
只是使用font-size: 100px !important;希望这对你有帮助。
回答by Codeone
The font-size property specifies the size, or height, of the font. font-sizeaffects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units.
DemoTry like this
font-size 属性指定字体的大小或高度。font-size不仅影响应用它的字体，而且还用于计算 em、rem 和 ex 长度单位的值。
演示试试这样
.navbar-brand
{
font-size: 100px;
}
Absolute keywords and values
绝对关键字和值
.navbar-brand
{
font-size: larger;
}
It accepts the following absolute keyword values:
它接受以下绝对关键字值：
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>回答by kramer65
You can do something like the following. It will not only make your brand-name a link but also will make it a heading. Easily change the font size by using a different heading tag (change h1 to h2, h3 etc). It will be efficient for search engines too.
您可以执行以下操作。它不仅会使您的品牌名称成为链接，还会使其成为标题。使用不同的标题标签轻松更改字体大小（将 h1 更改为 h2、h3 等）。这对搜索引擎也是有效的。
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>
