A Font Test Page

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 .

A Font Test Page

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support