Html 如何在 Bootstrap 4 中增加字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45999420/
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 font-size in Bootstrap 4?
提问by Mukul Kant
In Bootstrap 4, font-size defaults to using emor remfor fonts.
在 Bootstrap 4 中，font-size 默认为 usingem或remfor fonts。
How can I increase the font-sizefor all viewport sizes? Because every element looks tiny.
如何增加font-size所有视口尺寸？因为每个元素看起来都很小。
回答by Jade Cowan
Because Bootstrap 4 uses rem for the font-sizeunit of most of it's elements, you can set the font-sizein pxon the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-sizefor the htmlselector and run the project you can see how the sizing of the elements all change relative to the root element.
因为 Bootstrap 4 使用 rem 作为其font-size大部分元素的单位，您可以在自己的样式表中的 HTML 元素上设置font-sizein px，这将更改 Bootstrap 适用于您的元素的默认大小。我已经包含了一个codeply 项目的链接，所以你可以看到它的实际效果。环境中已经加载了 Bootstrap 4。如果更改的值font-size的html选择和运行项目，你可以看到在所有元素的相对于根元素改变大小。
Adding three lines of CSS to your stylesheet should be pretty easy:
在样式表中添加三行 CSS 应该非常简单：
html {
font-size: 16px;
}
回答by Mr. Laeeq Khan
You can use .h1to .h6bootstrap classes or you can make your own custom CSSclass and define font size over here and put your class on your HTMLelement.
您可以使用.h1到.h6自举类也可以使自己的自定义CSS类，并在这里定义字体大小，并把你的班级您的HTML元素。
回答by 7guyo
Bootstrap 4
引导程序 4
There're range of classes you can use to customize your text:
您可以使用多种类来自定义文本：
- h1-h6
- display-1 - display-4
small
<div *ngIf="customer_picked" class="pl-2 pt-2 h5"> <p>First name: {{selected_customer.first_name}}</p> <p>Last name: {{selected_customer.last_name}}</p> </div>
- h1-h6
- 显示 1 - 显示 4
小的
<div *ngIf="customer_picked" class="pl-2 pt-2 h5"> <p>First name: {{selected_customer.first_name}}</p> <p>Last name: {{selected_customer.last_name}}</p> </div>
回答by Alan Baljeu
You may also want to consider adding this:
您可能还需要考虑添加以下内容：
<meta name="viewport" content="width=device-width, user-scalable=no" />
When I added this, my mobile browsers suddenly showed reasonable text sizes.
当我添加这个时，我的移动浏览器突然显示了合理的文本大小。
