YUI 3: The CSS Fonts File

CSS Fonts

Getting Started

Include Dependencies

To use CSS Fonts, include the following source file in your web page with the link element:

<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssfonts/fonts-min.css">

Global vs. Contextual

YUI's CSS resources apply rules to HTML elements directly (using type selectors). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui-fonts classname.

Here is how to include the contextual version of CSS Fonts:

<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssfonts/fonts-context-min.css">

Using CSS Fonts

This section describes the features of CSS Fonts and includes these sections:

• Default Text
• Font-Size Adjustment
• Font-Family Adjustment

Default Text

With the CSS linked into the page, all text renders in the Arial font, at 13 pixel size, with 16 pixel line-height. The pre and code elements use the "monospace" font-family. Here's an example of HTML elements after Fonts has been applied.

Font-size Adjustment

To change the size of a font, use a percentage value from the chart below. Always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels). See the example.

<style> #demo1 {font-size:85%;} /*renders 11px */ #demo2 {font-size:100%;} /*renders 13px */ #demo3 {font-size:108%;} /*renders 14px */ #demo4 {font-size:123.1%;} /*renders 16px */ #demo5 {font-size:138.5%;} /*renders 18px */ </style>

Font-family Adjustment

Arial is the default font-family for all text (except pre and code) when you use Fonts CSS. Specify a new font-family when you want something other than Arial. See the example.

<style> #demo1 {} #demo2 {font-family:monospace;} #demo3 {font-family:georgia;} #demo4 {font-family:verdana;} #demo5 {font-family:times;} </style>

Using CSS Fonts In Specific Contexts

If you're using the contextual version, CSS Fonts's rules are only applied to elements that descend from a node with a class value of .yui-fonts. The classname can go as high in the DOM tree as desired, including on the <HTML&ht; element directly.

The following code snippet show how you might apply CSS Fonts to one of two columns:

<div> <div id="left-column" class="yui-fonts"><h1>Lorem Ipsum</h1></div> <div id="right-column"><h1>Lorem Ipsum</h1></div> </div>

Here is an example showing how to apply CSS Fonts to a subset of a page.

Support & Community