Ray's Test Pages - User Changeable Options - Fonts
I'd like the visitor to be able to choose a font type and size from a list or table, or be able to use a font from their own computer.
There isn't a way to collect information about the fonts installed on a user's computer. There is but it only works for Windows based machines - see http://www.gemal.dk/browserspy/fonts.html So probably the best thing to do is to provide a short list of fonts for the user to choose from. I'll also include instructions on how to change the default page colour and fonts using the browser options. The font size should be easier to do, just a drop-down list of point sizes from 8 to 14 or 16. The font tag is depreciated in HTML 4.01 but this is the only way I can see of doing this.
There are other things to think about. Do I give the user the choice to use things like bold, italics or underline styles for the fonts, especially for the headings? Do I make the headings and subheadings 1 or 2 point sizes larger than the main text or do I give the user the opportunity to use what font sizes and styles they like for each individual page element?
It is possible to change certain aspects of a dropdown list box appearance.
The code for the drop down box above is ...
<form><p align="center"> <select name="select1"> <option value="0">Arial <option value="1">TNR <option value="2">Antigoni <option value="3">Balloon <option value="4">Comic </select> </p></form>
The entire background colour and font can be changed by putting a style into the select statement. If you have the font installed, the text in the dropdown list box should be in Comic Sans MS. This works on Windows with IE v6, Mozilla v1.4, Netscape 7.1 and Opera v7.11
The code for the above dropdown list box is ...
<form><p align="center"> <select name="select1" style="background-color:#FF0000; font-family: Comic Sans MS; font-size: 16pt;"> <option value="0">Arial <option value="1">TNR <option value="2">Antigoni <option value="3">Balloon <option value="4">Comic </select> </p></form>
It is possible to change the colour of each option by using "style" inside the option. This does not work in Opera v7.11
Part of the code for the above dropdown is ...
<select name="select1" style="font-size: 15px;">
<option value="0" style="background-color:#FFFFFF;">White FFFFFF
<option value="1" style="background-color:#FFB6C1;">LightPink FFB6C1
<option value="2" style="background-color:#FF69B4;">HotPink FF69B4
<option value="3" style="background-color:#FF0000;">Red FF0000
<option value="4" style="background-color:#A52A2A;">Brown A52A2A
What I want to do is do display a short list of fonts using the name of that font to display each separate choice. The following code works in Mozilla v1.4 and Netscape 7.1 but not IE v6 or Opera v7.11
<option value="0" style="font-family: Arial;">Arial
<option value="1" style="font-family: Times New Roman;">TNR
<option value="2" style="font-family: Antigioni;">Antigoni
<option value="3" style="font-family: Balloon Bd BT;">Balloon
<option value="4" style="font-family: Comic Sans MS;">Comic
Another idea to display these fonts may be to put them in a table ...
|On my computer||On your computer|
|Arial||This is Arial|
|TNR||This is TNR|
|Antigoni||This is Antigoni|
|Balloon||This is Balloon|
|Comic||This is Comic|
The centre column are actually images made with 12pt fonts on my own system. The third column is text using, hopefully, the fonts on your system - if you've got them loaded, otherwise they should display in the default font.
The most common fonts seem to be ...
serif - Book Antiqua, Georgia, Palatino, Palatino Linotype, Times New Roman, Times
sans-serif - Arial, Avant Garde, Century Gothic, Comic Sans MS, Helvetica, Impact, Optima, Omega, Tahoma, Trebuchet MS, Univers, Verdana, ZapfHumanist BT, Zurich BT
monospaced - Courier, Courier New
The following table contains some common fonts. The way the font appears in the table is the way the text will appear on these pages. If the font appears in your default font it means that it isn't installed on your system.
|Antigoni||Cooper Md BT||Garamond||Lydian BT||Tahoma|
|Arial||Courier||Georgia||Microsoft Sans Serif||Technical|
|Balloon Bd BT||Courier New||Goudy Old Style||MS Sans Serif||Times New Roman|
|Book Antiqua||Elegance Light||Gourmand||Optimum||Trebuchet MS|
|Bookman Old Style||Europa||Humanist521 Lt BT||Palatino Linotype||Verdana|
|Century Schoolbook||Footlight MT Light||Lucida Console||Parisian BT||ZapfHumnst BT|
|Comic Sans MS||Futura Lt BT||Lucida Sans Unicode||Swis721 BT||Zurich BT|
Simply click on one of the cells above and the font used for the heading at the top of this page will change to that font.
The user may also type in the name of a font that is installed on their own system to change the font. The font typed in must be the same as how that font reports itself to the operating system. The best way of doing this is to open up a word processor or something similar and see how the fonts are reported there.
While testing the code I came across an interesting thing. The code used to change the font face is
//User supplied font name
with the tags defined as
<p><H1 id="Hd1" class="Hd">Ray's Test Pages - User Changeable Options - Fonts</H1></p>
the problem was that the code to make the font style, weight and text decoration change by using
didn't work. Later on, I found that by changing the ID line to
<span id="Hd1"><p>Ray's Test Pages - User Changeable Options - Fonts</p></span>
textDecoration can have the following attributes :-
underline - Text is underlined.
overline - Text has a line over it.
line-through - Text has a line drawn through it.
blink - Not implemented by IE.
none - Text has no decoration.
fontWeight can have the following attributes :-
normal - Default. Font is normal.
bold - Font is bold.
bolder - Font is heavier than regular bold.
lighter - Font is lighter than normal.
100 - Font is at least as light as the 200 weight.
200 - Font is at least as bold as the 100 weight and at least as light as the 300 weight.
300 - Font is at least as bold as the 200 weight and at least as light as the 400 weight.
400 - Font is normal.
500 - Font is at least as bold as the 400 weight and at least as light as the 600 weight.
600 - Font is at least as bold as the 500 weight and at least as light as the 700 weight.
700 - Font is bold.
800 - Font is at least as bold as the 700 weight and at least as light as the 900 weight.
900 - Font is at least as bold as the 800 weight.
fontSize has abundant choices percentages, ems, points and picas see
I like the thought of using the fontWeight numbers 100 to 900 and the fontSize in points 8 to 72. Perhaps both allowing the user to put their own numbers in. As with other drop down list boxes this can be coded individually, but I think it may be better to do it programmatically. In the fontWeight menu add the words "Normal" at 400 and "Bold" at 700. The fontSize drop down box should only use even numbers but allow the user to type in the odd ones if they want. Or maybe use xx-small, x-small, small, medium, large, x-large, xx-small.
If you've any suggestions, help, advice, bits of code, whatever please email me at email@example.com
Images - the page where the best of the image selection code ends up
Test Page - where most of the testing is done
Colours - Page 2 - page for testing CSS and other groupings
Webtek Systems - what my site (or anybody else's) must NOT look like
This page created 31st December 2003, last updated 26th January 2004
GoStats stats counter