Font Properties
- J07a
- (7:52)
- Information about the anatomy of typefaces.
- font-size
- The font's size.
- The units of measurement to use are px, em or %.
- font-weight
- Used for making text bold.
- Wide range of values, but few fonts support them.
- The reality is that more often than not your only real choices are whether the text is bold or not.
- Therefore, to keep things simple, you ought to rely on just two values:
- bold
- normal (used to override the parent's bold setting - the css bold property is inherited.
- Read more about the options.
- The bold setting results in the same in text appearance as using the <strong> or <b> elements, but those elements' characteristics are not inherited (passed down to nested tags) but on the other hand css does not have the intrinsic meaning of those tags.
- font-style
- There are only two optional values other than normal: italic and oblique. They will often have the same results or have only subtle differences.
- They usually provide the same appearance as <em> and <i>, but they are not inherited. Again, css does not possess the intrinsic meaning of those tags.
- font-family
- In order to see the font specified by this property, the font must be installed on the computer.
- When specifying a font-family, standard procedure is to specify a series of fonts in case the firs one on the list are not installed.
- Font names that use more than one term, such as Arial Black must be in quotes.
- This is because multi-term font names, such as Times New Roman need to be in quotes in order to be considered as a discrete, single entity and not as separate items.
- Although double or single quotes can be used in a stylesheet (embedded or external), use single quotes to accommodate the html style= attribute because html values are often in double quotes.
- It is a general rule that nested quotes need to be alternated between double and single quotes.
- The following are installed on virtually every computer and are therefore specified the most:
- Arial
- Georgia
- Verdana
- Trebuchet MS
- Times New Roman
- font - use this for css shorthand
- When using font shorthand:
- The font-size and font-family properties are required. If not specified, the entire line will be ignored.
- Values for the other font properties do not need to be provided.If excluded, their default values will be used
- Font properties must be specified in the following order although the first three can be in any order as long as they are in the first three:
- font-style (optional)
- font-weight (optional)
- font-variant (optional)
- font-variant uses these values: small-caps and normal.
- font-size/line-height size (required/optional)
- /line-height is optional
- But when used, it must be placed directly after the font-size.
- A forward slash must be placed between the size and line-height value, as shown.
- font-family must be last (required)
- Example of font shorthand that includes values for all font properties. These are listed in the correct order, as cited above:
{font: italic bold small-caps 1.3em/1.5em 'times new roman', times, serif;}
Assignment:
- Create a new html5 file and name it yourlastname_J07.html
- Create classes for each of the four bulleted properties above and one for the font shorthand.
- Name each class for one of the states in the United States.
- For example: nevada (keep the names lower case)
- Do not use two-word states such as North Dakota or New York.
- Use any value you wish for each of the properties.
- Except for normal
- For some properties you will have only one possible value.
- For the font shorthand, use every option listed including line height.
- That will be a total of six declarations.
- Create five paragraphs of Lorem ipsum text.
- Apply one of each class to each of the five paragraphs.
- Check your work before sending it to me, be sure that what you specified is actually appearing. If not, troubleshoot it to fix it.
Additional Information