Cascading Style Sheets: Modify Fonts with CSS

If you can't see this email, click here

Cascading Style Sheets Modify Fonts with CSS From Jennifer Kyrnin, your Guide to Web Design / HTML There are a lot of different properties in CSS that you can use to modify your fonts. What is a Font? The font family defines the face of the font, such as Geneva, Times New Roman, or fantasy. You list the font families you'd like your property to use in order of preference separated by a comma, with multiple word font names indicated in quotes: font-family : "Times New Roman", Courier, serif; Syntax of the font-family Property What are generic font families How to Decide Which Font Family to Use The font-family Property How do you define the size of a font? Defines the size of the font. There are four types of sizes: absolute - based on the browser default (medium): xx-small, x-small, small, medium, large, x-large, and xx-large relative - relative to the current size: smaller or larger length - a number with a unit of measure: points (pt), pixels (px), centimeters (cm), milimeters (mm), inches (in), ems (em), or exes (ex) percentage - a number relative to the current size % The font-size Property Boldness Defines the boldness of the font. It can be normal (the default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900. The font-weight Property Italics Defines if the font is italic or oblique. It can be defined as normal (the default), italic, or oblique. The font-style Property Small Caps Changes the font to small-caps. It can be defined as normal (the default) or small-caps. The font-variant Property Font Shorthand Property This is a shorthand property. It allows you to define all of the above font styles, plus the line height of your text. font: font-style font-variant font-weight font-size/line-height font-family; The font Property CSS 3 Font Properties CSS 3 brings us a lot of additional font properties to style fonts. Some work now and some don't. Always be sure to test in your browsers. font-size-adjust font-stretch font-effect font-smooth font-emphaisize-style font-emphasize-position font-emphasize Dynamic Fonts Dynamic fonts allow you to define a font face or property that isn't necessarily on the customer's computer. They are also sometimes called embedded fonts. They are not widely supported, so be sure to test before you rely on them. This email is written by: Jennifer Kyrnin Web Design / HTML Guide Email Me | My Blog | My Forum   Missing a lesson? Click here. About U. is our collection of free online courses designed to help you learn a new skill, solve a problem, get something done, or just learn more about your world. Sign up now, and we will email you lessons on a daily or weekly basis. You are receiving this email because you subscribed to the About.com 'Cascading Style Sheets' email. If you wish to unsubscribe, please click here. About respects your privacy: Our Privacy Policy Contact Information: 249 West 17th Street New York, NY, 10011 © 2010 About.com   Advertisement