MMDT1021 Chapter 10 Notes - page 1

 

The book is pretty straight forward presenting the material in this chapter.  These notes are just to clarify a few things that are not obvious.

Choosing a Font

Code Page
Here are several examples of setting a font. Result
Source

Choosing a Font Family

Code Page
The advantage to using a font family, is that you may specify a catch-all generic font in case none of the other fonts are on the system. Result
Source

Embedding Fonts on a Page

The procedure to create embedded fonts is fairly complicated.  You need a 3rd party piece of software called "WEFT" (from Microsoft) to create the embedded font file.  Web link to additional information on WEFT and web font embedding.

You can create a font file that consists of only the characters used in the HTML document that you created.  So if you add more text to your HTML document, you probably have to create a new embedded font file.  However the font file is relatively small.

Alternatively, you can create a font file that consists of the entire character set.  The font file is larger however.

To stop copyright infringement and outright theft of fonts, the eot font file is keyed to specific web server names.

Firefox does not support the eot font embedding.  Too bad font embedding is not implemented by other browerser other that Microsoft.

More information on embedding fonts into a web page.

Code Page
An example of an embedded  font called "Greek44". Result
Source

Directory Listing

A good example of an embedded  font called "StarTrek".  (Courtesy of a couple of CST students!) Result
Source
CSS

Directory Listing

 

Setting an Absolute Font Size

When setting an absolute font size, the end user cannot change the font size through their browser font size control.  This may be good, or bad, depending on the situation.
Code Page
Absolute font size.  The font size cannot be changed by the user viewing the web page. Result
Source

Setting a Relative Font Size

When setting an relative font size, the end user can change the font size through their browser font size control.
Code Page
Relative font size.  The font size can be changed by the user viewing the web page. Result
Source

 

Changing the Text's Background

I found it interesting that you can specify an image for the background of just a text selection.
Code Page
Background image for text.  Here is the image actually used for the background.  Result
Source