Home
1
Fonts - Part 2 Thu Oct 21, 2010 5:41 pm
Unknown Data
Registered Member
Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser :
Fonts - Part 2 Learn CSS - part 6 |
Fonts - part 2 Here is a list (like in lesson number 5) of what we are going through. • Font-family • Font-size • Font-style • Font-variant • Font-weight • Mergin of a font Font-family The font is as your surely had figured out, just the font we wich to write with, it could be Arial, Times New Roman, Helvetica or Baskerville. You should also notice, taht the Generic-family in the Font-family is the same. A Generic-family is actually a group of identical fonts. It's a good idea to write the Generic-family type as a possibily, it would then be much easier for the client to read which font we are "calling". Here is a quick list of the Generic-familys. serif: Times New Roman, MS Georgia, Garamond. sans-serif: Arial, Helvetica, Trebuchet, Verdana, Futura, Gill Sans. cursive: Zapf-Chancery, Caflisch Script. fantasy: Critter, Cottonwood, Western. monospace: Courier, MS Courier New, Prestige, Andele Mono. This is what a code could look like, if we add it to the stylesheet.
As shown are the fonts serperated with a comma. It's usefull for the browser because it's making it a lot easier for the client to find. Font-size By using the Font-size property, can we chose the size of the text. It can be done my using a lot of values after the "default-value" that are a number. Normally aare we using pixels, procent or em, but here is the full list of what there can be usefull. The relative values: • em (ems) • ex (x-height) The absolute values: px (pixels) in (inches) cm (centimeter) mm (millimeter) pt (points) pc (picas) % (procent) Font-style By using the Font-style can we use following values: normal, italic, oblique. You can surely guess what they each do. Font-variant The Font-variant decide it the text should be shown normal or in small-caps. The normal is (as said) normal and the small-caps is big letters written with a small size. Font-weight The Font-weight decides how bold the text should be, here is a list of possibilities. • normal • bold • bolder • lighter • 100 • 200 • 300 • 400 • 500 • 600 • 700 • 800 • 900 Mergin of a font We now have learned alot of the font. We got the Font-family, size, style, variant, weight etc. I've written an example so we can take a look at our final result.
[Font-style] [-variant] [-weight] [-size] [-family] We are done with the fonts right now, in the next lesson are we looking at the backgroundcolor. |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Nice tut UD