HTML/CSS/Text/letter spacing

Материал из Web эксперт
Перейти к: навигация, поиск

letter-spacing: 10px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p {
          letter-spacing: 10px;
      }
        </style>
    </head>
    <body>
    <p>
        Each letter of each word is ten pixels apart.
    </p>
    </body>
</html>



letter-spacing: .5em

 

<html>
<head>
<title>Font Illustration</title>
<style>
.line1  {font-size: 24pt;
         letter-spacing: .5em; 
}
.line2  {font-size: 32pt;
         font-weight: bold;
         font-style: italic;
         line-height: 2.5em}
</style>
</head>
<body>
<span class="line1">line1</span><br/>
<div class="line2">line2</div>
</body>
</html>



letter-spacing: normal

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
p.normal {
  letter-spacing: normal;
}
p.wide {
  letter-spacing: 1.5em;
}
p.narrow {
  letter-spacing: -.2ex;
}
</style>
</head>
<body>
<p class="normal">This paragraph has normal letter-spacing.</p>
<p class="wide">This paragraph uses a 1.5em letter-spacing.</p>
<p class="narrow">This paragraph uses a -.2ex letter-spacing.</p>
</body>
</html>



Set letter spacing to -0.1em

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 { 
 font: bold italic 2em "Helvetica Nue", serif; 
 margin: 0;
 padding: 0;
 letter-spacing: -0.1em; 
}
</style>
</head>
<body>
<h2><span></span>Designing</h2>
</body>
</html>



space between letters in the header is set to -1 pixels.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>letter-spacing</title>
        <style rel="stylesheet" type="text/css">
h4 {
    font: 18px sans-serif;
    letter-spacing: -1px;
    background: lightyellow;
    color: saddlebrown;
    margin-bottom: 0;
    border-bottom: 1px solid khaki;
}
        </style>
    </head>
    <body>
        <h4>Narrow Letter Spacing</h4>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/letter_spacing&oldid=5871»