Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [64]

By Root 1402 0
non-standard. Most browsers that support embedded fonts use TTF (the most common font format) or OTF (a somewhat more open variant of TTF). A new standard, WOFF, is on the horizon and may be more acceptable to font developers, but it isn’t widely used yet. Internet Explorer uses only the proprietary EOT format. Look up the WEFT utility for converting fonts for use in Internet Explorer.

3. Place the font file near your code: Your Web page will need a copy of the font file somewhere on the server; put it in the same directory as your page. Remember, when you move the page to the server, you also need to make a copy of the font file on the server.

4. Build a font-face: Near the top of your CSS, designate a new font face using your custom font. This is slightly different CSS syntax than you may have used before. The @ sign indicates you are preparing a new CSS element.

5. Specify the font-family: This is the name used to designate the font in the rest of your CSS. Typically, this is similar to the font name, but easier to type.

6. Indicate where the font file can be found: The src attribute indicates where the file can be found. Typically, this is the filename of the font file in the same directory as the page. You can include several src attributes if you want to have more than one version of the file. (You might include EOT and OTF formats, for example, so the font is likely to work on any browser.)

7. Use your new font in your CSS: You now can use the font-family name in your CSS the same way you do with any other font. If the user doesn’t have that font installed, the font is used for this Web page but not installed on the client’s machine. Some fonts (like Miama in my example) may require some size adjustments to look right.

Just because you can use any font file doesn’t mean you should. Many fonts are commercial products and cannot be distributed without permission. However, many excellent free and open-source fonts are available. See the open font library at http://openfontlibrary.org to find several great fonts.


Audio and Video Tags

Multimedia has been a promise of Web technology since the beginning but isn’t integrated fully into HTML. Developers have had to rely on third-party technologies, such as plugins and the embed tag, to incorporate audio and video into Web pages. HTML 5 finally supports audio (with an

This is a major breakthrough, or it will be if the browser developers cooperate. As an example, look at this code:

audioDemo.html

HTML 5 Audio Demo

This example uses the HTML 5 audio tag.

Try using Firefox 3.5 or greater.

This song was written by a friend of mine, Daniel Rassum. He sings about

hard life and redemption.

If you like this song, I encourage you to check out his album at

www.noisetrade.com.

It’s a “free trade” music site where you pay

what you think is fair for an artist’s work.

The only new feature is the

Figure 8-4 illustrates audioDemo.html playing a song.

The HTML 5 specification (at the moment) does not specify any particular file format for the audio tag. The key browsers support the open-source Ogg Vorbis format and uncompressed .wav files. Browser manufacturers are having difficulty agreeing on what the standard should be. Some organizations with a stake in proprietary

Return Main Page Previous Page Next Page

®Online Book Reader