CSS Basic Part-4 with advance feature of CSS font Property
Font is one of the important properties of CSS. Font property helps the reader to understand the text in their favorite style and size. Font property can add the finest look on text.
What We Discuss
Font Family
The
font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule.
Note: Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.
Syntax Example
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: “Lucida” Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
CSS EXAMPLE
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
HTML EXAMPLE
<body> <h1>CSS font-family</h1> <p class="serif">This is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">This is a paragraph, shown in the Arial font.</p> </body>
Font Size
The
font-size CSS property specifies the size of the font – specifically the desired height of glyphs from the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em,px,pt,ex etc for length units.
Formal syntax: <absolute-size> | <relative-size> | <length> | <percentage>
Syntax Example
font-size: xx-small /* <absolute-size> values */
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size: larger /* <relative-size> values */
font-size: smaller
font-size: 12px /* <length> values */
font-size: 0.8em
font-size: 80% /* <percentage> values */
CSS EXAMPLE
h1 {font-size:3em;}
h2 {font-size:24px;}
p {font-size:100%;}
HTML EXAMPLE
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> </body>
Font Style
Note: Italic
Formal syntax: normal | italic | oblique
Syntax Example
font-style: normal
font-style: italic
font-style: oblique
font-style: inherit
CSS EXAMPLE
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
HTML EXAMPLE
<body> <p class="normal">This is a paragraph, normal.</p> <p class="italic">This is a paragraph, italic.</p> <p class="oblique">This is a paragraph, oblique.</p> </body>
Font Variant
The
font-variant CSS property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.
Formal syntax: normal | small-caps
Syntax Example
font-variant: normal
font-variant: small-caps
font-variant: inherit
CSS EXAMPLE
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
HTML EXAMPLE
<body> <p class="normal">My name is Hege Refsnes.</p> <p class="small">My name is Hege Refsnes.</p> </body>
Font Weight
The
font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.
Note:
font-weight value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.
Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Syntax Example
font-weight: normal
font-weight: bold
font-weight: lighter
font-weight: bolder
font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900
font-weight: inherit
CSS EXAMPLE
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
<body> <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> </body>
Font
The
font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-heightand font-family, or a way to set the element’s font to a system font, using specific keywords.
As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.
Formal syntax: [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]
CSS EXAMPLE
<style>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
HTML EXAMPLE
<body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body>
0 comments:
Post a Comment