HTML/CSS/Text/letter spacing

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

letter-spacing: 10px

   <source lang="html4strict">

<!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>

Each letter of each word is ten pixels apart. 

   </body>

</html> 

</source>


letter-spacing: .5em

   <source lang="html4strict">

<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> line1

line2

</body> </html> 

</source>


letter-spacing: normal

   <source lang="html4strict">

<?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>

This paragraph has normal letter-spacing.

This paragraph uses a 1.5em letter-spacing.

This paragraph uses a -.2ex letter-spacing.

</body> </html> 

</source>


Set letter spacing to -0.1em

   <source lang="html4strict">

<!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>

Designing

</body> </html> 

</source>


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

   <source lang="html4strict">

<!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>

Narrow Letter Spacing

   </body>

</html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/letter_spacing&oldid=5871»