HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Set some font properties with the shorthand declaration
The font
property is a shorthand property for:
The font-size and font-family values are required. If one of the other values is missing, their default value are used.
Default value: | The default value of the font properties |
---|---|
Inherited: | yes |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS1 |
JavaScript syntax: | object.style.font="italic small-caps bold 12px arial,sans-serif" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property/Value | Description | Demo |
---|---|---|
font-style | Specifies the font style. Default value is "normal" | Demo ❯ |
font-variant | Specifies the font variant. Default value is "normal" | Demo ❯ |
font-weight | Specifies the font weight. Default value is "normal" | Demo ❯ |
font-size/line-height | Specifies the font size and the line-height. Default value is "normal" | Demo ❯ |
font-family | Specifies the font family. Default value depends on the browser | Demo ❯ |
caption | Uses the font that are used by captioned controls (like buttons, drop-downs, etc.) | |
icon | Uses the font that are used by icon labels | |
menu | Uses the fonts that are used by dropdown menus | |
message-box | Uses the fonts that are used by dialog boxes | |
small-caption | A smaller version of the caption font | |
status-bar | Uses the fonts that are used by the status bar | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
A demonstration of some of the other font property values.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>
CSS tutorial: CSS Font
HTML DOM reference: font property