Font scaling based on width of container - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Font

Description

Font scaling based on width of container

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, c</title> 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface"> 
  <style>
body {<!--  w w w . ja v  a 2s. co m-->
   color:Chartreuse;
   font-family:'Abril Fatface';
   line-height:2.3;
}

p {
   margin:0;
   font-size:calc(5vw + 5vh + 3vmin);
}
</style> 
 </head> 
 <body translate="no"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. V</p>  
 </body>
</html>

Related Tutorials