Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css fonts

Posted on 2010-11-29
6
Medium Priority
?
448 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 400 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 400 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Assisted Solution

by:hassonook
hassonook earned 400 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 400 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 400 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

715 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