Now I'd like to talk for a minute about the features Font
Tester has to offer. I have tried to make Font Tester in such a way such
that it supports the real-time previewing of just about every CSS
property available (as of CSS 2.1) that is related to fonts. This includes everything from
line-height to
font-style to
text-transform and
everything in between. Here's a quick run-down of all the different
features Font Tester has to offer.
Font Tester gives you the ability to enter (and preview)
your own custom text in 3 separate columns. Each column can be
configured (or "styled") individually. You can also choose how many
columns you wish to view at one time. You can choose to have 3 columns
each taking up 33% of the screen, 2 columns each taking up 50% of the
screen, or 1 column taking up 100% of the screen. After you've
chosen how many columns
you wish to view and
entered your own text
you can begin to edit the CSS properties for that column.
One of the CSS properties Font Tester allows you to edit is
the font-size property.
It allows you to choose from either a pre-defined CSS font size keyword
(small, medium, large, etc.) or enter your own font size in manually.
When you choose to enter your own font size in manually, it also allows
you to choose which CSS length unit you would like to use. You can choose
from all of the available CSS length units including px, %, em, in, cm,
mm, pt, pc, and ex. Also, once you click into the font size textbox,
rather than typing in a number you can also press the Up or Down arrow
keys on your keyboard to increase or decrease the size of the font.
Font Tester also supports dynamic editing of the
font-family CSS
property. It includes a convenient list of 19 commonly used
web-safe fonts
and 127 other commonly used fonts. It also includes quick access
to the five generic CSS font families: serif, sans-serif, cursive,
fantasy, and monospace.
Font Tester also supports dynamic editing of the
color and
background-color
CSS properties. By using the built-in
color picker you can simply move
your mouse over a color spectrum to find just the right color
(and background color) for your text. You can also edit the
HSV and
RGB values directly or choose one
of the 216 web-safe colors from a drop-down list. The color picker also
contains an additional drop-down list with over 1,000 named colors for
you to choose from.
Font Tester is also capable of showing you a real-time
preview of the following CSS properties:
text-align,
line-height,
font-weight,
font-style,
font-variant,
text-decoration,
text-indent,
text-transform,
letter-spacing,
word-spacing,
font-stretch,
font-size-adjust,
white-space,
unicode-bidi,
and direction. All of
which are optional and can be enabled or disabled at any time. If you
would like to enable and preview one of these properties all you have to
do is check the checkbox by its name to "enable" it. Once it's enabled,
you can assign it any value you like and preview it in the approriate
text column, or optionally check the checkbox a second time to "disable"
it so that it doesn't appear in your generated CSS code.
After you've finished setting all of your CSS properties
and you've chosen a style you like, the final step is to generate the
CSS code necassary to reproduce those styles. Font Tester comes with a
handy CSS Code Generator
which can generate all the necessary CSS code for you in three different
ways. It can generate your CSS code as a Type Selector, as a Class
Selector, or as an ID Selector. All three types of selectors are fully
configurable so you can enter your own base HTML element and choose your
own class or id name as well. After you've copied and pasted the
generated CSS code into the CSS section of your website, the final step
would be to copy and paste the generated HTML code into the HTML section
of your website. Next I would like to go over each of the features of
the site in detail and explain what each one does and how it's used.