PROWAREtech
Cascading Style Sheets: Tutorial - Page 03
Fonts
Use the font-family property to specify the font. This specifies two fonts in order of preference should one not
be installed on the user's computer. The idea is to assign a list of similar fonts that are common to most operating systems.
Some common fonts are Arial, Times, Times New Roman, Courier, Courier New, etc.
p {
font-family: Arial, "Times New Roman";
}Web Fonts
Web fonts are files downloaded from the website by the web browser. The @font-face directive tells the browser
where to download the font from as well as the name of the font. The font-family property is still used to
specify the font name in the same manner as with common fonts.
Basically, there are three types of web fonts: 1. Embedded Open Type (EOT), 2. True Type/Open Type, and 3. Web Open Font Format (WOFF). EOT fonts are compatible with Internet Explorer (IE) 5.0 and later. True Type/Open Type fonts are compatible with IE9 and newer, Chrome, Firefox, Opera, Safari and Android. Save for Android, WOFF fonts have the same browser compatibility. The main difference between WOFF fonts and other fonts is that WOFF fonts are compressed to lessen download time while the others are not.
<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
@font-face {
font-family: '1942 report';
src: url('/Fonts/1942.ttf') format('truetype');
}
</style>
</head>
<body>
<p style="font-family: '1942 report';font-size: larger;">
1942 report: this font looks like an old typewriter's output.
</p>
</body>
</html>1942 report: this font looks like an old typewriter's output.
Font Size
Font size is specified by the font-size property. It has several values that are valid. It can be a keyword,
point, percentage, em, rem, viewport height or pixel value.
Valid keywords are smaller, xx-small, x-small, small, medium,
large, x-large, xx-large and larger. The sizes are relative to the base
size of the element. Try them all to give an idea as to how they look.
p {
font-size: medium;
}Point values have the same meaning that they do in Microsoft Word. For example:
p {
font-size: 9pt;
}
h1 {
font-size: 48pt;
}
Like keywords, percentages are relative to the base font size but give more sizing power. Setting
font-size: 100%; uses the base font size of the browser. For example:
p {
font-size: 80%;
}
h1 {
font-size: 250%;
}Now that percentages are clear, it makes understanding em values easy. The em value multiplied by 100 is the percentage. This example is the same as the previous:
p {
font-size: .8em;
}
h1 {
font-size: 2.5em;
}
