Learn HTML : Fonts
Wednesday, March 18th, 2009 | Learn HTML
We have already looked at some of the main ways we format out text when using html, but like most things , we always want to change the overall style or font of the text that we write. This article tells us everything we need to know about fonts and how to impliment them in our html documents.
So lets take are standard html content and make a file called fonts.
<head> <title>Fonts</title> </head> <body> What do some of the fonts look like? </body> </html>
We have seen , in most cases , that when we use tags we have to have an open and close tag. The font tag is no different in that respect so we need
<font> .... </font>
as well as these open and close tags we will need to add attributes to the tags. Attributes are special code words used inside an HTML tag to control exactly what the tag does. When adding attributes to our tags we follow this structure.
[NameOfAttribute]=”[ValueOfAttribute]”
Where:
NameOfAttribute : is the identifier of the attribute to be used eg size
ValueOfAttribute : is the actual valued to be used eg “#333399″. These values should always be enclosed in quotes. Double style quotes are most common although single style quotes are allowed. Some atrtibutes will work without them but quotes should be used at all times (508 compliance means we always need quotes and Dimensions requires them also.)
So what attributes can we have when using our Font Tags.
Font Size: To change the size of the font we use the size attribute. The size attribute takes the following format.
<font size=“#”>…… </font>
Example Ranges
<font size=”1″>…… </font>
<font size=”2″>…… </font>
<font size=”3″>…… </font>
<font size=”4″>…… </font>
<font size=”5″>…… </font>
<font size=”6″>…… </font>
<font size=”7″>…… </font>
Font Color: To change the color of the text we use the color attribute. The color attribute takes the following format.
<font color=“#ff3399”>Text now appears in a different color</font>
The valid values for the font color are the hex values of color. Here is an online tool that will help you pick your colors. click hear to get started.
Font Face: To change the style of the text we use the face attribute. The face attribute takes the following format.
<font face=“Georgia”>This text has a Georgia font</font>
For the font face, use the name of the font type as the value such as Arial, Tahoma, Georgia. I have not been able to find a good web page for the list of allthe font faces that our out there, but if you have please let us know by adding a comment. We will keep looking, and when we find something we will let you know.
In the above exmaples we have just added 1 attribute at a time, but you should know that you can have more that one attribute in the font tag at any one time , for example
<font size=”5″ face=”Tahoma” color=”#00FF00″>All 3 options</font>
And there you have it , you now know how to change your font style in your HTML documents.
4 Comments to Learn HTML : Fonts
I’m all for increasing the skillset of Dimensions scripters, but giving outdated info is not helpful to anyone.
Hello!
Isn’t it considered best practice to use CSS to achieve this these days?
i.e. <span style=”font-size: 12px; color: #00ff00; font-family: arial”>All 3 options</font>
Or actually, better still
<span class=”all3″>All 3 options</span>
And then in the CSS file:
.all3 {
font-family: arial;
font-size: 12px;
color: #00ff00
}
The idea being that you can then just change everything in one place rather than having to do it to loads and loads of font tags.
http://www.w3schools.com/tags/tag_FONT.asp
Cheers!
Jason
Smarter Dimensions Team18 March, 2009
Thanks for the comment & Keep them coming..
While I agree with you that this syntax is outdated … it is still used today , and if I am not mistaken it is used by the Desktop Author product. CSS will be covered in later articles but first we need to help the real newbie’s get across the basics of html so that when they see this type of syntax they understand it.
Oh god – Desktop Author uses font tags?
It’s strange though, because if you use question.style.color or whatever, it renders it as inline styles.
It’s just weird because mrInt is supposedly XHTML only, but font tags aren’t in the XHTML spec!
Cheers,
Jason
18 March, 2009