Solved

css fonts

Posted on 2010-11-29
6
433 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
Comment Utility
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
Comment Utility
0
 
LVL 2

Assisted Solution

by:arkod
arkod earned 100 total points
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 2

Assisted Solution

by:hassonook
hassonook earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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 …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

771 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

12 Experts available now in Live!

Get 1:1 Help Now