Use calculation based font size in HTML and CSS

Description

The following code shows how to use calculation based font size.

Example


<!--from  w w w .ja v  a2  s .c  o m-->
<html>
<head>
<style type="text/css">
body {
font-size: 12px;
}

p {
margin: 0;
width: 35em;
font: 1em/1.5 serif;
}

.two {
font-family: Georgia, serif;
}

.one {
font-family: Times, serif;
}
</style>
</head>
<body>
<div>div</div>
<p>
<span class="one">Times</span> <span class="two">Georgia</span>
</p>
<p class="one">
<strong>Times:</strong> after
</p>
<p class="two">
<strong>Georgia:</strong> after
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use calculation based font size in HTML and CSS