gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Copyedit and clarify phrasing (#27265)

Browse Source
This commit is contained in:
Amy
2019-03-06 09:56:21 -05:00
committed by The Coding Aviator
parent c8f5b20b71
commit 9c1424ba7a
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
guide/english/css/fonts/index.md
View File

@ -2,21 +2,21 @@
title: Fonts title: Fonts
--- ---
## Fonts ## Fonts
The CSS font properties define the font family, weight, size, variant, line height and style of a text. The CSS font properties define the font family, weight, size, variant, line height, and style of an element's text content.
### Font family ### Font family
The font family of a text is set by using the `font-family` property. The font family is set by using the `font-family` property.
It works with a *fallback* system, meaning if your browser does not support the first font, it tries with the next one and so on. If the name of the font is more than one word it must be surrounded by quotes. Either single quotes `(')` or double quotes `(")` can be used. It works with a *fallback* system i.e. if your browser does not support the first font specified, it tries with the next one, and so on. If the name of the font is longer than one word, it must be in quotes.
```css ```css
p { p {
font-family: "Times New Roman", Times, serif; font-family: "Times New Roman", Times, serif;
} }
``` ```
In the above example, "Times New Roman" is the *family-name* of the font, while "serif" is the *generic-name*. Generic names are used as a fallback mechanism for preserving style if the family-name is unavailable. A generic name should always be the last item in the list of font family names.
Generic family names are: In the above example, "Times New Roman" and "Times" are <family-name>s and "serif" is a <generic-name>. Generic names are used as a fallback mechanism for preserving style if the <family-name> is unavailable. A generic name should always be the last item in the list of font family names. The generic family name options are:
* serif * serif
* sans-serif * sans-serif
* monospace * monospace
@ -32,16 +32,18 @@ In addition to specifying common fonts that are found on most operating systems,
Then you can use the font that you have imported (in this example, `Lobster`) in your code as normal. Then you can use the font that you have imported (in this example, `Lobster`) in your code as normal.
### Font style ### Font style
The `font-style` property can be used to specify italic text. The `font-style` property can be used to specify the text's style.
This property has 3 values: This property has 3 values:
* normal - Text shown normally * normal - Text shown normally
* italic - Text shown in *italic* * italic - Text shown in *italic*
* oblique - Text shown leaning * oblique - Text shown slanted
`italic` and `oblique` both look like the normal font but slanted. The main difference is that `italic` is a whole other version of the font, slanted at a particular angle and sometimes styled slightly differently. `oblique` is the original font but with the ability to be slanted at and angle to different degrees. `italic` and `oblique` both look like the normal font but slanted. The main difference is that `italic` is a whole other version of the font, slanted at a particular angle and sometimes styled slightly differently. `oblique` is the original font but with the ability to be slanted at and angle to different degrees.
If a font does not have an italic version, the oblique version may be substituted, and vice versa. If a font has neither version, the letters will be artificially slanted.
```css ```css
.normal { .normal {
font-style: normal; font-style: normal;
@ -57,14 +59,13 @@ This property has 3 values:
``` ```
### Font size ### Font size
The `font-size` property sets the size of the text. The `font-size` property sets the size of the text. The default size is usually `16px`.
There are different types of font size values: There are several different values that may be used to determine size:
* `px` (pixels) - The default size of text being `16px` * `px` (pixels) - specifies the exact number of pixels for the size of the font
* `em` - based on the current or inherited font size of an element * `em` - a relative measurement that is dynamically created based on the font size of an element's parent. `1em` = the current font size, so `1em` = `16px` (recommended by the W3C)
* `rem` - like `em`, but based on the base font-size of the document * `small`, `medium`, `large` - absolute size values
* `small`, `medium`, `large` - known as absolute size values
* `%` - percentages * `%` - percentages
```css ```css
@ -116,7 +117,8 @@ p.small {
``` ```
### Font shorthand property ### Font shorthand property
Font properties can be specified with the shorthand property `font`. Font properties can be specified with the shorthand `font`.
It takes as values (in this order): It takes as values (in this order):
- font-style (optional) - font-style (optional)
- font-variant (optional) - font-variant (optional)