YouTipPr Font Font
## CSS font Property
The CSS `font` property is a shorthand property used to set all individual font properties in a single declaration. By using this shorthand, you can write cleaner, more concise stylesheets.
---
## Syntax and Usage
The `font` property allows you to set the following properties in a specific order:
```css
font: font-style font-variant font-weight font-size/line-height font-family;
```
### Required Values
To make the shorthand declaration valid, you **must** specify at least:
* `font-size`
* `font-family`
If either of these two values is missing, the entire declaration will be ignored by the browser.
### Optional Values and Defaults
The other values (`font-style`, `font-variant`, `font-weight`, and `line-height`) are optional. If they are omitted, they will automatically reset to their initial/default values.
> **Note:** The `line-height` value is optional but must be written immediately after the `font-size`, separated by a forward slash (e.g., `12px/30px` or `1.5em/1.6`).
---
## Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | *Not specified* (each individual property defaults to its initial value) |
| **Inherited** | Yes |
| **CSS Version** | CSS1 |
| **JavaScript Syntax** | `object.style.font = "italic small-caps bold 12px arial, sans-serif"` |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `font` property.
| Property | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **font** | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
---
## Values and Descriptions
### Font Component Values
| Value | Description |
| :--- | :--- |
| `font-style` | Specifies the font style (e.g., `normal`, `italic`, `oblique`). |
| `font-variant` | Specifies whether the text should be displayed in a small-caps font (e.g., `normal`, `small-caps`). |
| `font-weight` | Specifies the boldness of the font (e.g., `normal`, `bold`, `bolder`, `100` to `900`). |
| `font-size/line-height` | Specifies the font size and the line height (e.g., `12px/30px`, `1.2em/1.5`). |
| `font-family` | Specifies a prioritized list of one or more font family names and/or generic family names (e.g., `Arial, sans-serif`). |
### System Font Values
You can also use a single keyword to set the font of an element to match the system font used by the user's operating system:
| Value | Description |
| :--- | :--- |
| `caption` | Uses the font styled for captioned controls (e.g., buttons, drop-downs). |
| `icon` | Uses the font styled for icon labels. |
| `menu` | Uses the font styled for dropdown menus. |
| `message-box` | Uses the font styled for dialog boxes. |
| `small-caption` | A smaller version of the caption font. |
| `status-bar` | Uses the font styled for window status bars. |
---
## Code Examples
### Example 1: Basic and Advanced Shorthand Usage
```css
/* Example 1: Setting only the required properties (size and family) */
p.ex1 {
font: 15px Arial, sans-serif;
}
/* Example 2: Setting style, weight, size, line-height, and family */
p.ex2 {
font: italic bold 12px/30px Georgia, serif;
}
```
### Example 2: Using System Fonts
This example demonstrates how to apply system-defined fonts to elements:
```css
/* Apply the system menu font to a custom navigation bar */
.custom-menu {
font: menu;
}
/* Apply the system status-bar font to a notification widget */
.status-widget {
font: status-bar;
}
```
---
## Important Considerations
1. **Order Matters:** You must follow the correct sequence. The `font-style`, `font-variant`, and `font-weight` properties must come before `font-size`. The `font-family` must always be the last property.
2. **The Slash Separator:** The `line-height` cannot stand alone; it must immediately follow `font-size` separated by a `/` (e.g., `16px/1.5`).
3. **Implicit Resets:** When using the shorthand `font` property, any individual font properties not explicitly declared are automatically reset to their default values. For example:
```css
/* If you have this: */
p {
font-weight: bold;
font: 14px Arial; /* font-weight is implicitly reset to 'normal' here */
}
```
To avoid unexpected overrides, ensure your shorthand `font` declarations are placed before individual font overrides, or include all necessary values within the shorthand.
---
## Related Articles
* CSS Tutorial: (/css/css-font.html)