Geek Answers Handbook

Why is the font family in two places in the bootstrap?

I just saw in Bootstrap that its use of the font family is in two places, one in html and the other in body :

 html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

... and after many lines:

 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }

So why is font-family used in two places with a different font?

+4
source share
4 answers

The first set of styles defined in Bootstrap.css is actually Normalize.css . Noramlize.css is the first 189 lines of Bootstrap.css.

If we look at the uninstalled version, the full code snippet with comments is actually:

 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

Why is it determined twice? Because they link Normalize.css without changing this CSS file, which defines the font-family for the html element itself.

Normalize.css just sets the base font to sans-serif. Their comment CSS file says:

 /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
+2
source

Bootstrap is now built using LESS. This means that CSS is built using variables and various files, which can sometimes overlap or have values ​​set in different places.

Firstly, it uses normalize.less , which ensures that everything returns to the basic standard.

Line 1 - 13

 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ // // 1. Set default font family to sans-serif. // 2. Prevent iOS and IE text size adjust after device orientation change, // without disabling user zoom. // html { font-family: sans-serif; // 1 -ms-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2 }

The body is then installed in the scaffolding.less file, which sets up all the basics for loading.

Line 26 - 33

 body { font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @body-bg; }

This also happens in the SASS compiler.

+2
source

After entering the bootstrap LESS it is very easy to understand.

This is not a rule or workaround, just running into a library.

html {} comes from normalize.css inside bootstrap.

body {} comes from the boot file itself.

0
source

This is because Bootstrap uses a reset stylesheet (probably packaged with bootstrap into one mini version). The purpose of the reset stylesheet is to reduce browser inconsistencies in things such as default line heights, header fields and font sizes, etc.

In this case, the reset font family is redundant because Boostrap changes the font immediately on the body. Removing all redundant CSS reset would be a lot of work compared to a very small gain.

0
source

More articles:


All Articles