+Note: The files "fonts.css" and "fonts-context.css" are deprecated, use "cssfonts.css" and +"cssfonts-context.css" instead.
+ +The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size. Both Standards and Quirks modes are supported in A-grade browsers.
+ +Note: CSS Base can complement CSS Reset by applying a style foundation for common HTML elements that is consistent for A-grade browsers.
+Getting Started
+ +Include Dependencies
+ +To use CSS Fonts, include the following source file in your web page with the link element:
+ +<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssfonts/cssfonts-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 .yui3-cssfonts 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.10.3/build/cssfonts/cssfonts-context-min.css">+ +
Using CSS Fonts
+ +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, 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.
+ +#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 */
+
+
+ | For pixels (px) | +Declare this percent (%) | +
|---|---|
| 10 | 77 |
| 11 | 85 |
| 12 | 93 |
| 13 | 100 |
| 14 | 108 |
| 15 | 116 |
| 16 | 123.1 |
| 17 | 131 |
| 18 | 138.5 |
| 19 | 146.5 |
| 20 | 153.9 |
| 21 | 161.6 |
| 22 | 167 |
| 23 | 174 |
| 24 | 182 |
| 25 | 189 |
| 26 | 197 |
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.
#demo1 {}
+#demo2 {font-family:monospace;}
+#demo3 {font-family:georgia;}
+#demo4 {font-family:verdana;}
+#demo5 {font-family:times;}
+
+
+ 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 .yui3-cssfonts. The classname can go as high in the DOM tree as desired, including on the <html> element directly.
The following code snippet show how you might apply CSS Fonts to one of two columns:
+ +<div> + <div class="yui3-cssfonts"><h1>Lorem Ipsum</h1></div> + <div><h1>Lorem Ipsum</h1></div> +</div>+ + +
Here is an example showing how to apply CSS Fonts to a subset of a page.
+