Solved

css fonts

Posted on 2010-11-29
6
434 Views
Last Modified: 2012-05-10
Hi,

I was running following example
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Open in new window


I have not understood the outputt. Which font is being set to which element.
for example
p.serif{font-family:"Times New Roman",Times,serif;}
for seriff class out of three fonts Times New Roman",Times,serif which one does apply.


Please advise. any links resourcees sample code, ideas highly appreciated. thanks in advance
0
Comment
Question by:gudii9
6 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 100 total points
ID: 34236415
font family in CSS uses a fallback system, it's best practice to use the family name and generic name of the font you are planing to use after the actual font name. This give you a certain amount of guarantee that out put will look like you intended it to on most of the systems.

in font-family:"Times New Roman",Times,serif; "Serif" is the generic name, and "Times" is the family name. if on a system the font "Times New Roman" is not found, it will look for the first font it can find from the Times family and use that and so on.
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34236416
0
 
LVL 2

Assisted Solution

by:arkod
arkod earned 100 total points
ID: 34236430
p.serif{font-family:"Times New Roman",Times,serif;}  <--- Times New Roman is selected.

p.sansserif{font-family:Arial,Helvetica,sans-serif;} < -- Arial is selected.

IN a font family , the first font that you declare gets used in the class. However the font needs to be included in the family .

To know about font family this is a very good place to begin with : - http://font-family.com/ 
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Assisted Solution

by:hassonook
hassonook earned 100 total points
ID: 34236488
the font which apply is the first font if there is error in the name of font the font which apply is the default font.
also the three fonts are same
Times New Roman"=Times=serif
Arial=Helvetica=sans-serif

this is useful tutorial:   http://www.w3schools.com/css/default.asp
0
 
LVL 9

Assisted Solution

by:Ramanhp
Ramanhp earned 100 total points
ID: 34237895
may this example also help u to understand better


http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 100 total points
ID: 34245360
You would normally use just --

P  { then your CSS }

so when you use --

P.serif
P.sanserif

you are using two different "classes" of font type, one named "serif", the other named "sanserif"

The code --

<p class="serif">This is a paragraph

invokes the CLASS of "serif" -- so the fonts specified for serif in the CSS are used in order 1 to 3

<p class="sanserif">This is a paragraph

invokes the CLASS of "sanserif" -- so fonts specified for sanserif in the CSS are used in order 1 to 3
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now