Solved

css fonts

Posted on 2010-11-29
6
436 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

773 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