Fucking FAILURE! - Shad0w
 
HomePortalMemberlistRegisterLog in
Top posters
shad0w
 
rdwuestewald
 
Crush Combat
 
banksy
 
Kewley
 
Ashley
 
Anthony
 
Inix
 
mitch
 
dukemaster95
 
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

Most users ever online was 13 on Fri Mar 09, 2018 8:56 pm

Share | 
 

 [CSS] Fonts [TUT]

Go down 
AuthorMessage
shad0w



Number of posts : 173
Points : 238
Reputation : 0
Registration date : 2009-03-18
Location : 127.0.0.1

PostSubject: [CSS] Fonts [TUT]   Thu Mar 19, 2009 7:44 pm

In this tutorial we will be learning something about fonts. First of all you probably want
to know what fonts means and is, a font is for example: Arial, Times New Roman and Verdana. You can
change a font in every writing program and also when you write comments to this tut
I cant really put a word to what it means, cause i dont know one... but i hope you get the meaning.

On your page the text is probably all the same font, so when you are done here you can make your text more
dynamic.

Lets get started, first of all lets see what we can do to the text.
We can change the:
* font-family
* font-style
* font-variant
* font-weight
* font-size

- First thing first lets change the font-family. It can look like this:

H1 {
font-family: arial, verdana, "times new roman";
}

The reason why we write three different fonts is because if the computer watching the page doesn't have the first font installed it will automaticly jump to the next in the line.

And the reason why we write "times new roman" and not just times new roman is because of the spaces between the words.

If you use some very special fonts it is recommended to inset a very common one like Arial down the list.
You can do this to any text you want, also the P and h2, h3, h4 and so on.

- Next thing, font-style.
There are multiple font styles: Normal, Italic and Oblique.
We will be using Italic, and you can change that yourself if you want to.

This is how its gonna look:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
}


- Font-Variant. Font variant is used to choose between: Normal, Small-caps. This determins if the text should be with upper-case letters writtin in small or just normal letters, that may sound confusing but when you try it, you will see it is not . And the code will look like this:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
}


- Next thing is font-weight. font weight describes how bold / heavy the text is, you can choose between
bold or normal, and if you dont write anything it will choose default which is normal. So the code
looks like this:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
font-weight: bold;
}

And if you dont know what bold is i will explain: Bold just fattens the text, plain and simple

- And the last thing is font-size. That basicly does what it says.
There are different units you can use, for example: px, cm, % and em. It is recommended to use the % and em cause that makes the user watching your site able to scale the text size up and down themself, and that is good if you dont see very well. I will still be using px but only cause this is a tutorial.
Now the code should look like this:


H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 30px;
}


DONE! now you can go experiment with all this yourself!

Thats all for now. Hope you learned something in this third lesson of CSS.
I really hope you will either learn something and give good feedback or just comment on it
Back to top Go down
 
[CSS] Fonts [TUT]
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Fucking FAILURE! - Shad0w :: Shad0w's Computer Section :: Coding :: Web-
Jump to: