Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS Fonts - family, size, style and variant

In this tutorial we discuss about CSS fonts and its properties as font family, size, style and variant. We also will cover issues related to CSS font.

Introduction:

In this tutorial I discuss about CSS fonts and their practical implementation using cascading style sheet properties. I will also cover issues related to CSS font and will cover a section why sometimes specific font is installed in the device which is used to access few websites.

Description:

CSS provide a power to handle text displayed on page. You can change text size, style, font, color, and more…

You can select a font's generic family and its particular font name. There are multiple degrees of size and boldness available with CSS. You can expand and condense a font and add different styles. You can also make few others adjustments as per web page requirement.

Below are the various section to understand the CSS fonts. Tutorial describes the CSS font family, size, style, variant and lot of properties related to fonts.

CSS Font Family:

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. There are two types of name used to divide the font family A) Family Name and B) Generic-Family .Family names are for example, "Times New Roman" , "Arial", “Verdana” “Arial Black” etc. Generic families are groups of family-names with uniformed appearances. E.g. sans-serif

Listing 1: Script for CSS font family

<html>
<head>
<title>Mrbool.com Tutorials - CSS Fonts</title>
<style type="text/css">
p.ClassTimes{font-family:"Times New Roman",Times,serif;}
p.ClassArial{font-family:Arial,"Verdana",sans-serif;}
</style>
</head>
<body>
<h1>Font Family:</h1>
<p class="ClassTimes">This is css font tuorial, shown in the Times New Roman font.</p>
<p class="ClassArial">This is a block of content,shown in the verdana font.</p>
</body>
</html> 
figure is output of Font Family script

Figure 1: Above figure is output of Font Family script

CSS Font Style:

font-style property defines the chosen font either in italic, normal or oblique. Following script will clear the concept of font style.

Listing 2: Script of Font Style

<html>
<head>
<title>Mrbool.com Tutorials - CSS Fonts</title>
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a CSS FONT Tutorial view: normal</p>
<p class="italic">This is a CSS FONT Tutorial view: italic.</p>
<p class="oblique">This is a CSS FONT Tutorial view: oblique.</p>
</body>
</html> 
figure is output of font style script

Figure 2: The above figure is output of font style script

CSS Font Size:

The font-size property sets the size of the text. However you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size.

Absolute size: is the specified size set to the text.

Relative size: is the size incorporated from surrounding elements.

Listing 3: Script for CSS font size

<html>
<head>
<title>Mrbool.com Tutorials - CSS Fonts</title>
<style>
h1 {font-size:40px;}
h2 {font-size:1.875em;}
p {font-size:5px;}
</style>
</head>
<body>
<h1>This is CSS font tutorial. Font-Size:40px </h1>
<h2>This is CSS font tutorial. Font-Size:1.875em</h2>
<p>This is CSS font tutorial. Font-Size:5px</p>
</body>
</html> 

Sometime older version of internet explorer puts resizing error, for that the developer or script maker use “em” instead of pixels. This em unit for size is recommended by www consortium.

The default text size in browsers is 16 pixels .So 1 em=16 pixels. Then size can be calculated by using formula- “pixels/16=em” .

figure is output of CSS font size script

Figure 3: Above figure is output of CSS font size script

CSS Font Variant:

CSS Font Variant allows you to convert your font to all characters in small or caps. Note that not every font supports CSS Font Variant, so make sure to test it before you publishing.

Listing 4: Script of CSS Font Variant
<html>
<head>
<title>Mrbool.com Tutorials - CSS Fonts</title>
<style type="text/css">
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 CSS font tutorial: Normal</p>
<p class="light">This is CSS font tutorial: Light</p>
<p class="thick">This is CSS font tutorial: Thick</p>
<p class="thicker">This is CSS font tutorial: Thicker</p>
</body>
</html> 
figure is output of CSS font variant script

Figure 4: Above figure is output of CSS font variant script.

Conclusion:

Sometimes web developer uses specific language like “Spanish”,” Arabic” etc for specific pages. If you have installed the particular language font then you will be able to see the content of web pages. So always check your setting if font is not reflecting on webpage. This tutorial covers the CSS font basics. Please explore the example given in this tutorial and let us know if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login