|
|
CSS font properties are used to retrieves or sets a combination of separate font properties of the object.
Alternatively, retrieves or sets one or more of six user-preference fonts.
To define the appearance of text,the CSS font properties.
|
|
Font Properties
|
|
Font properties are given below:
Font Family
Font Style
Font Variant
Font Weight
Font Size
Font
|
|
Font Family
|
|
To render the text,the font family specifies which font family is to be used .
For an element,the font-family property is a prioritized list of font family names and/or generic family names . The browser will use the first value it recognizes.
A font family is designed to be used in combination and exhibiting similarities in design which cotains a group of fonts,
One member of the family may be bold, another italic, another small caps or using ondensed. Font family names include "Helvetica", "New Century Schoolbook", and "Kyokasho ICA L". Font family names are not restricted to Latin characters. Font families may be of different categories: those with or without serifs, those that resemble handwriting,those whose characters are or are not proportionally spaced, those that are fantasy fonts, etc.
|
|
CSS Code
|
body
{
font-family: courier, serif
}
p
{
font-family: arial, "lucida console", sans-serif
}
<p style="font-family: arial, 'lucida console',
sans-serif">
|
|
|
Font Style
|
|
Whether the text is to be rendered using a
normal, italic, or oblique face,the font style is used. Italic
is a more cursive companion face to the normal face, but not so cursive
as to make it a script face. Oblique is more commonly used as a companion face to sans-serifand slanted form of the normal
face . This
definition avoids having to label slightly slanted normal faces as
oblique, or normal Greek faces as italic.
The font-style property sets the style of a font.
|
|
CSS Code
|
body
{
font-style: italic
}
|
|
|
Font Variant
|
|
Whether the text is to be rendered using
the normal glyphs for lowercase characters or using small-caps glyphs
for lowercase characters,the font variant is used. A particular font property is used to
request an appropriate font and may contain only normal,
only small-caps, or both types of glyph and, if the font contains both variants, the
appropriate glyphs.
|
p
{
font-variant: normal
}
|
|
|
Font Weight
|
|
The font weight used to render the text like the boldness or lightness of the glyphs, relative to other fonts in the same font family.
|
|
CSS Code
|
p
{
font-weight: bolder
}
|
|
|
Font Size
|
|
To set the size of the font from baseline to baseline, when set solid (in CSS terms, this is when the 'font-size' and 'line-height' properties have the same value), the font size is used .
|
|
CSS Code
|
body
{
font-size: x-large
}
p
{
font-size: 20px
}
|
|
The follwing table describe the font Properties:
|
| Property |
Description |
values |
Sample Code |
| font |
Sets multiple font properties |
font-family
font-size
font-weight
font-style
font-variant |
|
| font-family |
Sets the font-name |
family-name
generic-family |
p {font-family: verdana,arial}
p {font-size: 10pt; font-family: arial} |
| font-size |
Sets the size of the text |
smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large |
P {font: 12pt arial}
P {font: 70% sans-serif}
P {font: bold italic large Verdana} |
| font-weight |
Sets the weight of the text |
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900 |
p{font-weight: bold} |
| font-style |
Sets the style of the text |
normal
italic
oblique |
p{font-style: italic} |
| font-variant |
Sets the font variant |
normal
small caps |
h2 {font-variant: small-caps} |
|
Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
Keywords:
css font color, css font family, css font style, css font size,
css font weight
|
|
| HTML Quizes |
|
|
| XML Quizes |
|
|
| Browser Scripting Quizes |
|
|
| Server Scripting Quizes |
|
|
| .NET (dotnet) Quizes |
|
|
| Multimedia Quizes |
|
|
| Web Building Quizes |
|
|
| Java Quizes |
|
|
| Programming Langauges Quizes |
|
|
| Soft Skills Quizes |
|
|
| Database Quizes |
|
|
| Operating System Quizes |
|
|
| Software Testing Quizes |
|
|
| SAP Module Quizes |
|
|
| Networking Programming Quizes |
|
|
| Microsoft Office Quizes |
|
|
| Accounting Quizes |
|
|
| Computer Basics Quizes |
|
|
|
