Asked By
Michele r
30 points
N/A
Posted on - 09/04/2012
Hello guys,
I want to know about font family font size, and font weight.
What is the work of those items on a web page?
How it is used?
How can I use?
Please tell me about more.
Functions of font-family, font-size, and font-weight on building a web page
Hello,
It is used as like in Ms office where you can design your font face. There you can specific your font details in your web site.
Example:
<p style="font-family:Verdana, Geneva, sans-serif; font-size:10px; font-weight: bold; >This sentence or word will show according font code. </p>
Here font-family shows font face, font-size which size of the font, font-weight which for font bold.
There is your answer.
Thanks.
Functions of font-family, font-size, and font-weight on building a web page
Hi Michele,
These are properties used in web designs on how the text in a website should be displayed.
Font family is a property in CSS that is used to apply text fonts on a web browser.
You can specify one or more font names for font-family.
You can enter multiple font names via font-family in which you'd prefer them to be used in your website. For example:
body {
font-family: Arial, Verdana, Helvetica;
}
This means that if Arial fails to load, the web browser will try using Verdana and failing that it will use Helvetica.
Font-size is a property that specifies the size of the font you wanted to use on the web. You can set it using keywords like xx-small, x-small, small, large, medium up to xx-large.
You can also set it using relative font sizes like a percentage (%110) or in Em typography units.
Lastly, you can use a fixed size in setting up the font-size like in pixels or points.
Based on our previous example:
body {
font-family:Arial, Verdana, Helvetica;
font-size: 12 px; /*(12 pixels)*/}
Font-weight is primarily for setting the font in either bold or normal.
I'm adding it to the example so you can see how it is added.
body {
font-family:Arial, Verdana, Helvetica;
font-size: 12 px; /*(12 pixels)*/
font-weight: bold; /* in this case the font is 12 pixels in size and should be displayed as bold*/}
Functions of font-family, font-size, and font-weight on building a web page
In HTML, the size attribute is used inside a <font> tag or element. This attribute indicates the size of the text inside the tag. The syntax to use the size attribute is <font size=”number”> where “number” is the size of the font just like when changing the font size in Microsoft Office Word. For example:
<font size=”6″>Let’s see how big this is!</font>
The number is anywhere from 1 to 7. The browser default is 3. The size attribute is supported in all major web browsers like Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, Safari, and the Opera browser. Unfortunately, in the current HTML5 standard, the size attribute of <font> is no longer supported. An alternative is to use CSS to change the font size.
The syntax for changing the font size in CSS is <p style=”font-size:20px”>. The font weight property in HTML defines how thick or thin the characters in text should be displayed and is used in CSS. The correct syntax for font weight is “font-weight: normal|bold|bolder|lighter|number|initial|inherit;” where “normal” is the default value. The “number” value is anywhere from 100, 200, 300, 400, 500, 600, 700, 800, to 900.
400 is the same as normal and 700 is the same as bold. The “initial” value is the same as the default value. The “inherit” value inherits the property from its parent element. For example:
p.thicker {
font-weight: 900;
}
