Fonts Some of the proceeding information has been supplied by: http://ag.arizona.edu/ecat/html-basics/fontattributes.html The majority of the information for this presentation is from: http://interactiveu.berkeley.edu:8000/pathway/stories/storyReader$10
Font: Defined • A font is a set of printable or displayable textcharacters in a specific style and size. The type design for a set of fonts is the typeface and variations of this design form the typeface family. Thus, Helvetica is a typeface family, Helvetica italic is a typeface, and Helvetica italic 10-point is a font. In practice, font and typeface are often used without much precision, sometimes interchangably. From: http://whatis.techtarget.com/definition/0,,sid9_gci212137,00.html
Default Font Size • The default font size is 3. Font size 3 is usually equivalent to font size 12 in a Word document. There are different reasons why font size 3 may appear larger or smaller at times. These variances could stem from one's browser (i.e. Netscape or Explorer), the type of program that is used in processing the HTML (i.e. DreamWeaver vs. FrontPage), or even the type of computer (i.e. Mac vs. PC).
Font Size • There are 2 ways to change the size of your font: • One way to change font size: • <font size=4>enlarges font by one size</font> • <font size=3> standard font size </font> • <font size=2>decreases font by one size</font> • You can change your font size to equal any number. The larger the number, the larger your font will be. Likewise, the smaller your number, the smaller your font will be. The largest that you can set your font to is size=7. • <font size="n"> where n is a number 1 through 7. 1 is the smallest and 7 is the largest. If no font size is indicated, normally size 3 is displayed.
Font Size • Another way to change font size: • <font size="+1"> enlarges font by one size </font> • <font size= "-1">decreases font by one size</font> • <font size="+2>enlarges font by two sizes</font> • You can use <font size="+1"> or <font size="+2"> or <font size="-1"> or <font size="-2"> to alter the size of the displayed font. This is referred to as relative sizing and it is relative to the basefont, which is normally size 3 unless otherwise stated.
Font Color • You will need an HTML color table to do this. This is what the tags will look like to change font color: <font color=“#”> </font> • Place your hexadecimal color code between the pound sign (#) and the end quote (”)
Font Color Tag • Example: If you wanted to change the color of your font to blue, this is what your tags should look like: <font color="#0000FF ">blue colored font</font> • Each color is represented by a hexadecimal color code. The code that you type in after the pound sign is what designates the color. Your HTML color table or chart will help guide you in choosing a color. • The font color change will occur between your opening and closing font tags. • Your font will retain its newly designated color until you close your font tag.
Font Face • The face of your font is the actual font that is used. You can declare any font that you would like, but remember, if your reader doesn't have that font installed their browser will try to find a match for it, and their page will not look like you intended. • To address this problem you can specify a list of face names, separated by commas, for the browser to use in order of preference. Keep in mind that a standard font on a PC (such as Arial) might not be standard on a Macintosh. So you should always view your pages with a minimally installed machine (and preferably on both platforms) to make sure that your page looks as designed even with minimal fonts. From: http://html.miningco.com/library/weekly/aa082400a.htm
Font Face • You will need to know the names of font faces to do this. The names of font faces are easy enough to find and can be found in Word. An example of a font face is Times New Roman or Arial. • To change your font face, this is what your tags should look like:<font face=""> </font> • Example: If you wanted to change your font face to Arial, this is what your tag would look like:<font face=“verdana">arial</font> • Between the quotes is where you would designate the name of the font face that you want to use. Your font will retain its newly designated face until you close your font tag.
Multiple Font Attributes • Once you have learned how to change the font size, color, and face, you can add all of these attributes together. • Example: <font size=5 color=“#008000” face=“times new roman”>This font is twice the size of the default, is green, and is written in Times New Roman</font>
Order • The order in which you designate font face, color, and size does not matter. • Remember: If you do not close your font tag, all of the text on your web page will continued to be affected until the tag is closed.