CSS font Property
The font property is a shorthand property for the following properties:
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
You can set all the properties with the following order: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family. The line-height property is used for setting the space between lines.
It is required to define font-size and font-family properties' values. If one of the values is missed, its default value is used.
All the individual values of the font-size property that are not specified, will be set to their initial value.
| Initial Value | Default values of the properties. |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. Font-size, font-weight, font-stretch, and line-height are animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.font = "italic normal bold 1em/140% "Lucida Grande", sans-serif"; |
Font as a shorthand property¶
While using this shorthand property you should know some important things about it:
Mandatory values¶
The "font-size" and "font-family" values are considered to be mandatory ones. The whole declaration will be ignored if one of these values are absent.
Optional values¶
The other five values are optional. In case of using one of these values, take into account that they must come before the "font-size" value in the declaration, otherwise they will be ignored.
The font and font-stretch properties¶
The font-stretch property is new in CSS3, and if you use it in an older browser, the whole line will be ignored.
The inheritance for optional values¶
If you omit the optional values they will not inherit values from their parent element. They will be restored to their initial state.
Keywords that define system fonts¶
The following values of the font property can be used as keywords:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
They set the font to the one that is used on the operating system of the user for that specific category. For example, if you specify the “menu” value, the font will be set on that element for using the same font that is used on the operating system for dropdown menus and menu lists.
These keyword-values can only be used with the font shorthand property.
Syntax¶
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Example of the font property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Example of the font property defined with italic fonts: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Example of the font property, where the font-size, font-weight, and line-height are animatable:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| font-style | Defines the font style. Its default value is normal. |
| font-variant | Defines the font-variant. Its default value is normal. |
| font-weight | Defines the font-weight. Its default value is normal. |
| font-size/line-height | Defines the font size and line-height. Its default value is normal. |
| font-family | Defines the font family. Its default value depends on the browser. |
| caption | The font is used for captioned controls (e.g., buttons, drop-downs). |
| icon | The font which is used to label icons. |
| menu | The font is used in menus (e.g., dropdown menus and menu lists). |
| message-box | The font is used in dialog boxes. |
| small-caption | A font that is used for labeling small controls. |
| status-bar | A font that is used in window status bars. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent's element. |
0 Comments
CAN FEEDBACK
Emoji