docs/partials/cssfonts-size-source.mustache

	cssfonts-size-source.mustache revision 8817197b3e98d94ab2ade1f70820496f4d5e88c2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Fonts Sizing Example</title>
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/reset.css" type="text/css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/fonts.css" type="text/css">
<style type="text/css" media="screen">
    .cssfonts--10 {font-size:77%;}
    .cssfonts--11 {font-size:85%;}
    .cssfonts--12 {font-size:93%;}
    .cssfonts--13 {font-size:100%;}
    .cssfonts--14 {font-size:108%;}
    .cssfonts--15 {font-size:116%;}
    .cssfonts--16 {font-size:123.1%;}
    .cssfonts--17 {font-size:131%;}
    .cssfonts--18 {font-size:138.5%;}
    .cssfonts--19 {font-size:146.5%;}
    .cssfonts--20 {font-size:153.9%;}
    .cssfonts--21 {font-size:161.6%;}
    .cssfonts--22 {font-size:167%;}
    .cssfonts--23 {font-size:174%;}
    .cssfonts--24 {font-size:182%;}
    .cssfonts--25 {font-size:189%;}
    .cssfonts--26 {font-size:197%;}
</style>
</head>
<body>

<h1>The first row is the size set with CSS Fonts. The second row is the reference size set with pixels.</h1>

<p class="cssfonts--10"><em>(77%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:10px;"><em>(10px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--11"><em>(85%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:11px;"><em>(11px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--12"><em>(93%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:12px;"><em>(12px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--13"><em>(100%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:13px;"><em>(13px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--14"><em>(108%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:14px;"><em>(14px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--15"><em>(116%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:15px;"><em>(15px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--16"><em>(123.1%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:16px;"><em>(16px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--17"><em>(131%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:17px;"><em>(17px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--18"><em>(138.5%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:18px;"><em>(18px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--19"><em>(146.5%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:19px;"><em>(19px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--20"><em>(153.9%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:20px;"><em>(20px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--21"><em>(161.6%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:21px;"><em>(21px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--22"><em>(167%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:22px;"><em>(22px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--23"><em>(174%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:23px;"><em>(23px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--24"><em>(182%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:24px;"><em>(24px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--25"><em>(189%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:25px;"><em>(25px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--26"><em>(197%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:26px;"><em>(26px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

</body>
</html>