by Trainer Riad Thalji
Introduction Page Structure Making Text Bold Making Text Emphasized Line Breaks Direction Divisions Headings Horizontal Lines Paragraphs Underline Comments Ordered/Unordered Lists Nested Lists Color Names Color Codes Color Backgrounds Background Images Working with Images Working with Fonts Character Entities The Head Tag Working with Links Defining Tables HTML Forms
Working with Fonts
- Fonts type and styles are defined with the style attribute.
- If Non-English text will be used, the HTML document need to be set to use utf-8 Character Set.
- Please see the Descriptive Tags in section in this tutorial to find how to set the character set in the document.
- Utf-8, means that the browser need to expect Unicode characters representation method which can represent characters and symbols from any language.
Setting Font Type
Font types can be set by the style attribute, like in the following example:
<p style="font-family: 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, 'sans-serif'">Your text here</p>
- Notice that HTML authors usually specify a set of fonts in the font family attribute so that the browser will find an alternative in case the client does not have the needed font installed.
- Like all style attributes, font styling can be done in any tag that may include text.
Font Color and Weight
- Like font-family, font color and weight can be set as a style attribute.
Font color is simply set by the color attribute; like for example:
<p style=”color: gray”>your text here</gray>
Font weight is also defined as a style attribute, for example if we want to make our text bold, we write:
<p style=”font-weight: bold”>your text</p>
- Many other font styles are available.
- Let’s conclude by an example;
<!doctype html> <html> <body> <h1>Font Examples</h1> <p style="font-family: 'Gill Sans', 'Myriad Pro'; font-weight: bold; font-size: 20px; color: darkgoldenrod"> This paragraph is displayed in Gill Sans font, however if the browser does not support Gill Sans, the alternative is Myriad Pro, and the text will be bold with a size of 20px and a golden color. </p> <div style="background-color: olive; color:white; font-weight: bold; font-size: 30px; font-family: Constantia, 'Georgia, 'serif'"> In this <div> I'm using an olive color for the background, a white color for the font itself, a bold weight, a 30px font size, and a Georgia font type, with the alternative serif. </div> </body> </html>
The results will be something like the following: