A Font Test Page
Total Page:16
File Type:pdf, Size:1020Kb
A Font Test Page You will be able to use this page to test whether a browser supports a font or not. 1. Create a new XHTML document, with the skeleton you are used to creating by now: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Font test</title> </head> <body> </body> </html> 2. Add a <link /> element to an external style sheet. The name of the style sheet will be font- test.css . <head> <title>Font text</title> <link rel="stylesheet" type="text/css" href="font-test.css" /> </head> 3. Add four <div> elements to the body of the document, each containing the line “The quick brown fox jumped over the lazy dog." For each element, give it a class attribute whose value is the name of a different typeface, and start each sentence with the name of the typeface, too, like this: <div class="arial">Arial: The quick brown fox jumped over the lazy dog.</div> <div class="helvetica">Helvetica: The quick brown fox jumped over the lazy dog. </div> <div class="TimesNewRoman">Times New Roman: The quick brown fox jumped over the lazy dog.</div> <div class="MrsEaves">Mrs Eaves: The quick brown fox jumped over the lazy dog. </div> 4. Save this file as font-test.html . *Adapted from Beginning Web Programming with HTML, XHTML and CSS 5. Create a new document in the editor you are using and save the file as font-test.css . 6. Add the selectors for each of the <div> elements you added to your XHTML document: div.arial div.helvetica div.TimesNewRoman div.MrsEaves 7. Add font-family properties to each of these, and give the value of the typeface specified: div.arial {font-family:arial;} div.helvetica {font-family:Helvetica;} div.TimesNewRoman {font-family:"Times New Roman";} div.MrsEaves {font-family:"Mrs Eaves";} 8. Add another typeface after the one you want to view, and separate the two with a comma. div.arial {font-family:arial, courier;} div.helvetica {font-family:Helvetica, courier;} div.TimesNewRoman {font-family:"Times New Roman", courier;} div.MrsEaves {font-family:"Mrs Eaves", courier;} 9. Add the following rule to make sure that there is adequate space between each line to look at the fonts: div {line-height:28px;} 10. Save this CSS file and open the XHTML page in your browser. You should end up with something like the next figure: *Adapted from Beginning Web Programming with HTML, XHTML and CSS .