Categories
CSS

CSS fonts and text formatting

  • text-decoration: underline (or none to remove it, or overline to strike it out)
  • text-decoration: blink; alternative to deprecated tag <blink>
  • letter-spacing: 10px (controls the distance between letters)
  • word-spacing: 10px (controls the distance between words, negative numbers will overlap words)
  • line-height: 1.5; (equivalent to saying 150% of the normal line size)
  • text-align: center; or left, right, justified (space between words vary slightly to make the end of line more uniform)
  • text-indent: 25px; Indenting the first line of text:

@font-face allows you to use external files to install and use fonts on the fly.

The syntaxis is a bit hacky, in order to get it right it may be easier for you to use the following resource:

http://www.fontsquirrel.com/fontface/generator

But it goes something like this:
@font-face {
font-family: ‘Tagesschrift’;
src: url(‘tagesschrift.eot’); /* IE 5-8 */
src: local(‘☺’), /* sneakily trick IE */
url(‘tagesschrift.woff’) format(‘woff’), /* FF 3.6, Chrome 5, IE9 */
url(‘tagesschrift.ttf’) format(‘truetype’), /* Opera, Safari */
url(‘tagesschrift.svg#font’) format(‘svg’); /* iOS */
}

Here are some services offering font faces:

http://www.fontsquirrel.com/

http://www.google.com/webfonts

https://typekit.com/

http://fontdeck.com/

Leave a Reply

Your email address will not be published. Required fields are marked *