Font Family
The font family of a text is set with the font-family property.
» EXAMPLE:
<html>
<head>
<style>
h1 {
font-family: "Georgia";
}
h3.heading {
font-family: Verdana, Geneva, sans-serif;
}
p {
font-family: "Courier";
}
</style>
</head>
<body>
<h1>This is heading with font family Georgia.</h1>
<h3 class="heading">This is heading with font family Verdana.</h3>
<p>This is heading with font family Courier.</p>
</body>
</html>
» Result:
This is heading with font family Georgia.
This is heading with font family Verdana.
This is paragraph with font family Courier.
Font Style
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
» EXAMPLE:
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<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>
</html>
» Result:
This is a paragraph, normal.
This is a paragraph, italic.
This is a paragraph, oblique.
Font Size
The below example demonstrates how to set font size with font-size property.
There's 2 ways:
- With Pixels
- With Em
Set Font Size With Pixels
» EXAMPLE:
<html>
<head>
<style>
p.demo {
font-size: 37px;
}
p.demo2 {
font-size: 26px;
}
p {
font-size: 10px;
}
</style>
</head>
<body>
<p class="demo">This is a paragraph.</p>
<p class="demo2">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
» Result:
This is a paragraph.
This is a paragraph.
This is a paragraph.
Set Font Size With Em
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
» EXAMPLE:
<html>
<head>
<style>
p.demo {
font-size: 2.2em;
}
p.demo2 {
font-size: 1.4em;
}
p {
font-size: 0.8em;
}
</style>
</head>
<body>
<p class="demo">This is a paragraph.</p>
<p class="demo2">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
<head>
<style>
p.demo {
font-size: 2.2em;
}
p.demo2 {
font-size: 1.4em;
}
p {
font-size: 0.8em;
}
</style>
</head>
<body>
<p class="demo">This is a paragraph.</p>
<p class="demo2">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
» Result:
This is a paragraph.
This is a paragraph.
This is a paragraph.
Set Boldness
» EXAMPLE:
<html>
<head>
<style>
p.normal {
font-weight:normal;
}
p.light {
font-weight:lighter;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900;
}
</style>
</head>
<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>
</html>
» Result:
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
Set the variant of the font
» EXAMPLE:
<head>
<style>
p.demo1 {
font-variant: normal;
}
p.demo2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="demo1">This is a paragraph with normal variant.</p>
<p class="demo2">This is a paragraph with small caps.</p>
</body>
</html>
» Result:
This is a paragraph with normal variant.
This is a paragraph with small caps.
ALL IN ONE
» EXAMPLE:
<html>
<head>
<style>
p.demo1 {
font: 15px arial;
}
p.demo2 {
font: italic bold 12px/30px Georgia;
}
</style>
</head>
<body>
<p class="demo1">This is a paragraph with normal variant.</p>
<p class="demo2">This is a paragraph with small caps.</p>
</body>
</html>
» Result:
This is a paragraph with normal variant.
This is a paragraph with small caps.
No comments:
Post a Comment