Export (0) Print
Expand All
Expand Minimize

Font Dialog Box, Visual Web Developer

The Font dialog box lets you to define cascading style sheet (CSS) style attributes that determine the font characteristics for an HTML element. You can apply these attributes either directly to HTML elements or add them to CSS style rules.

You can access the Font dialog box by the following methods:

  • In Design view, select Font from the Format menu.

If the selected page element does not have any CSS rules applied to it, the style rule is created as an inline style. If a CSS style rule exists for the page element, the style information is written to the existing style rule.

NoteNote

Inline style rules override style rules that are in a style element on the page or style rules that are in an external CSS file.

Font

Provides a list of fonts to use for text in a page element.

If you are designing documents for users who might work with different operating systems, select fonts that most users will have. A diverse Internet audience might not have a wide assortment of fonts installed. It is common to list several fonts so that the browser can select the best match. For example, you might select Verdana, which is a Windows system font that is designed for Web display. You might then manually add Arial, Helvetica (for Macintosh browsers), and Sans-Serif (the generic font choice for users who do not have any of the other fonts listed). If you select these fonts, the following CSS style rule is added:

font-family: Verdana, Arial, Helvetica, sans-serif;

Font Style

Sets the font-style attribute for text in a page element.

Select <Default Style> (no option chosen), Bold, or Italic. For example, if you select Italic, the following CSS style rule is added:

font-style: italic;

NoteNote

When the attribute is <Default Style>, no style rule is created and no code is added to an existing style rule.

Size

Sets the font-size attribute for text in a page element.

You can use the absolute values in the list such as large (18pt) and x-large (36pt). You can also select relative sizes such as smaller and larger. You can also type a specific value and a unit, such as px, pt (default), pc, mm, cm, in, em, ex, and %. For example, if you type 20pt, the following CSS markup is inserted:

font-size: 20pt;

NoteNote

   Avoid using pixel (px) measurements, because text that is formatted in pixels will print at a smaller size than the size of the text on the monitor. This can cause accessibility problems.

Color

Sets the color for the text in a page element. Select a color from the list or click More Colors for additional choices.

Effects

Adds HTML attributes for text effects such as text-transform and text-decoration, and for text phrase attributes such as cite and code. For example, if you select the All caps and Underline check boxes, the following CSS style rule is added:

text-transformation: uppercase; text-decoration: underline;

Preview

Displays a preview of sample text with the selected attributes applied.

Spacing

Sets the letter spacing for text in a page element. Choose Expanded to insert more space between letters, or Condensed to reduce the spacing between letters. This option is used with the By option, which provides a value for the amount that the letter spacing is expanded or condensed. For example, if you set Spacing to Condensed and set By to 2pt, the following CSS style rule is added:

letter-spacing: -2pt;

NoteNote

When the attribute is set to Normal, no style rule is created and no code is added to an existing style rule.

By

Sets the letter spacing for expanding or condensing text.

Position

Sets the vertical alignment of text in a page element. For example, if you set Position to "text-top", the following CSS style rule is added:

vertical-align: text-top;

Preview

Displays a preview of sample text with the selected attributes applied.

Community Additions

ADD
Show:
© 2014 Microsoft