56 lines
No EOL
2.8 KiB
HTML
56 lines
No EOL
2.8 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>YUI Library - Fonts - Example: Setting the font size with YUI Fonts</title>
|
|
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
|
<style>
|
|
.test10 {font-size:77%;} /* for setting 10px */
|
|
.test11 {font-size:85%;} /* for setting 11px */
|
|
.test12 {font-size:93%;} /* for setting 12px */
|
|
.test13 {font-size:100%;} /* for setting 13px */
|
|
.test14 {font-size:108%;} /* for setting 14px */
|
|
.test15 {font-size:116%;} /* for setting 15px */
|
|
.test16 {font-size:123.1%;} /* for setting 16px */
|
|
.test17 {font-size:131%;} /* for setting 17px */
|
|
.test18 {font-size:138.5%;} /* for setting 18px */
|
|
.test19 {font-size:146.5%;} /* for setting 19px */
|
|
.test20 {font-size:153.9%;} /* for setting 20px */
|
|
.test21 {font-size:161.6%;} /* for setting 21px */
|
|
.test22 {font-size:167%;} /* for setting 22px */
|
|
.test23 {font-size:174%;} /* for setting 23px */
|
|
.test24 {font-size:182%;} /* for setting 24px */
|
|
.test25 {font-size:189%;} /* for setting 25px */
|
|
.test26 {font-size:197%;} /* for setting 26px */
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="doc3">
|
|
|
|
<h1>YUI Fonts Example: Setting Font Size</h1>
|
|
<p class="notes">Note: To set the font size, always use percentages (%) from the <a href="http://developer.yahoo.com/yui/fonts/#using">conversion chart</a> for maximum consistency and accessibility.</h1>
|
|
|
|
<p class="test10">Lorem ipsum dolor. [77% = 10px]</p>
|
|
<p class="test11">Lorem ipsum dolor. [85% = 11px]</p>
|
|
<p class="test12">Lorem ipsum dolor. [93% = 12px] (was 92%)</p>
|
|
<p class="test13">Lorem ipsum dolor. [100% = 13px]</p>
|
|
<p class="test14">Lorem ipsum dolor. [108% = 14px] (was 107%)</p>
|
|
<p class="test15">Lorem ipsum dolor. [116% = 15px] (was 114%)</p>
|
|
<p class="test16">Lorem ipsum dolor. [123.1% = 16px] (was 122%)</p>
|
|
<p class="test17">Lorem ipsum dolor. [131% = 17px] (was 129%)</p>
|
|
<p class="test18">Lorem ipsum dolor. [138.5% = 18px] (was 136%)</p>
|
|
<p class="test19">Lorem ipsum dolor. [146.5% = 19px] (was 144%)</p>
|
|
<p class="test20">Lorem ipsum dolor. [153.9% = 20px] (was 152%)</p>
|
|
<p class="test21">Lorem ipsum dolor. [161.6% = 21px] (was 159%)</p>
|
|
<p class="test22">Lorem ipsum dolor. [167% = 22px] <!-- (renders 1px too small in Op Win/Mac, FF/Mac) --></p>
|
|
<p class="test23">Lorem ipsum dolor. [174% = 23px] <!-- (renders 1px too small in Op Win/Mac, FF/Mac) --></p>
|
|
<p class="test24">Lorem ipsum dolor. [182% = 24px] <!-- (renders 1px too small in Op Win/Mac, FF/Mac) --></p>
|
|
<p class="test25">Lorem ipsum dolor. [189% = 25px] <!-- (renders 1px too small in Op Win/Mac, FF/Mac) --></p>
|
|
<p class="test26">Lorem ipsum dolor. [197% = 26px] <!-- (renders 1px too small in Op Win/Mac, FF/Mac) --></p>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |