Use CSS to modify a font - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font

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

Description

Use CSS to modify a font

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem </title> 
  <style>
.u-h {<!-- ww w . j  a v a2 s . c o  m-->
   border:0;
   clip:rect(0 0 0 0);
   height:0.626rem;
   margin:-0.626rem;
   overflow:hidden;
   padding:0;
   position:absolute;
   width:0.626rem
}

.header {
   background-color:Chartreuse;
   position:relative;
   max-width:38.6rem;
   margin:0 auto
}

.header__logo {
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex;
   float:none;
   margin-left:auto
}

.header__logo>.logo-font {
   font-family:Convergence, sans-serif;
   font-size:49px;
   font-weight:801;
   color:yellow;
   text-shadow:-2px 0 blue, 0 2px pink, 2px 0 OrangeRed, 0 -2px grey
}

.onto {
   font-size:91%;
   line-height:0;
   position:relative;
   top:-0.20em;
   display:inline-block;
   line-height:43px;
   padding-left:0.10px;
}

.onto::after {
   content:'';
   position:absolute;
   left:.2em;
   top:100%;
   right:.2em;
   bottom:-.2em;
   background-color:BlueViolet;
}
</style> 
 </head> 
 <body translate="no"> 
  <meta charset="utf-8"> 
  <title>Lorem ipsu</title> 
  <meta name="viewport" content="width=device-width,minimum-scale=1"> 
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Convergence">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorp 
  <header class="header" role="banner"> 
   <nav class="header__inner"> 
    <div class="header__logo" data-link-name="nav2 : logo"> 
     <span class="u-h">Lorem ipsum dol</span> 
     <span class="header__logo"> <span class="logo-font">Lorem<span class="onto">L</span>Lorem ip</span> </span> 
    </div> 
   </nav> 
  </header>  
 </body>
</html>

Related Tutorials