mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 12:40:58 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #19098 from twbs/v4-font-stack

Browse Source 
v4: Native system font stack for sans-serif
This commit is contained in:
Mark Otto 2016-02-06 15:07:39 -08:00
commit c344ff5b17
5 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scss/_component-examples.scss
View File

@ -1,3 +1,5 @@
// scss-lint:disable QualifyingElement
// //
// Grid examples // Grid examples
// //

24
docs/content/reboot.md
View File

@ -32,6 +32,30 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. - The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
## Native font stack
The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
{% highlight sass %}
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome for OS X (San Francisco) and Windows (Segoe UI)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Linux distros
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
// Older Android
"Droid Sans",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif !default;
{% endhighlight %}
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
## Headings and paragraphs ## Headings and paragraphs
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.

7
docs/content/typography.md
View File

@ -15,9 +15,10 @@ Bootstrap includes simple and easily customized typography for headings, body te
Bootstrap sets basic global display, typography, and link styles. Specifically, we: Bootstrap sets basic global display, typography, and link styles. Specifically, we:
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default) - Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
- Set the global link color via `$link-color` and apply link underlines only on `:hover` - Set the global link color via `$link-color` and apply link underlines only on `:hover`.
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.

6
scss/_grid.scss
View File

@ -51,7 +51,7 @@
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
.col-#{$breakpoint}-first { order: -1; } .col-#{$breakpoint}-first { order: -1; }
.col-#{$breakpoint}-last { order: 1; } .col-#{$breakpoint}-last { order: 1; }
} }
} }
@ -59,7 +59,7 @@
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
.row-#{$breakpoint}-top { align-items: flex-start; } .row-#{$breakpoint}-top { align-items: flex-start; }
.row-#{$breakpoint}-center { align-items: center; } .row-#{$breakpoint}-center { align-items: center; }
.row-#{$breakpoint}-bottom { align-items: flex-end; } .row-#{$breakpoint}-bottom { align-items: flex-end; }
} }
@ -69,7 +69,7 @@
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
.col-#{$breakpoint}-top { align-self: flex-start; } .col-#{$breakpoint}-top { align-self: flex-start; }
.col-#{$breakpoint}-center { align-self: center; } .col-#{$breakpoint}-center { align-self: center; }
.col-#{$breakpoint}-bottom { align-self: flex-end; } .col-#{$breakpoint}-bottom { align-self: flex-end; }
} }

4
scss/_variables.scss
View File

@ -137,10 +137,10 @@ $grid-gutter-width: 1.875rem !default; // 30px
// //
// Font, line-height, and color for body text, headings, and more. // Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default; $font-family-base: $font-family-sans-serif !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element. // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default; $font-size-root: 16px !default;