Article From:https://www.cnblogs.com/zoulixiang/p/9967621.html
CSS Font instance
CSS Font attributes define the font series, size, bolding, style (such as italics) and variants (such as small capital letters) of the text.
CSS font family
In CSS, there are two different types of font family names:

Universal Font Series - A combination of font systems with similar appearance (such as "Serif" or "Monospace")
Specific Font Series - Specific Font Series (e.g. "Times" or "Courier")
In addition to a variety of specific font series, CSS defines five generic font series:

Serif Typeface
Sans-serif Typeface
Monospace Typeface
Cursive Typeface
Fantasy Typeface
CSS Font attribute
Attribute description
font Short attributes. The function is to set all attributes for fonts in a declaration.
font-family Set font series.
font-size Set font size.
font-size-adjust When the preferred font is unavailable, the replacement font is scaled intelligently. (CSS2.1 has deleted this attribute.)
font-stretch Stretch the font horizontally. (CSS2.1 has deleted this attribute.)
font-style Set font style.
font-variant Display text in small capitals or normal fonts.
font-weight Set the size of the font.
######
family-name
generic-family
A preferred list of font family names or/and class family names for an element.

Default: Depends on the browser.

inherit Provides that the font family should be inherited from the parent element.


Value description
normal Default value. The browser displays a standard font style.
italic The browser displays an italic font style.
oblique The browser displays a tilted font style.
inherit Provides that the font style should be inherited from the parent element.

1.Setting fonts for text
This example demonstrates how to set text fonts.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p.serif{font-family:"Times NEW Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,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>

2.Set font size
This example demonstrates how to set font size.

<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>

3.Setting Font Style
This example demonstrates how to set font style.
<style type="text/css">
p.normal {font-style: normal}
p.italic {
font-style: italic;}
p.oblique {
font-style:oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">THis is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

4.Setting variants of fonts
This example demonstrates how to set variants of fonts.
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

5.Set the size of the font
This example demonstrates how to set the size of the font.
<style type="text/css">
p.normal {font-weight:normal}
p.thick {font-weight: bold}
p.thicker {font-weight:900}
</style>
</head>
<body>

<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>

</body>

6.All font attributes are within one declaration
This example demonstrates how to use abbreviated attributes to set font attributes within a declaration.

<style type="text/css">
p.ex1{font: italic arial,sans-serif;}
p.ex2{font:italic bold 12px/30px arial,sans-serif;}
</style>
</head>
<body>
<p class="ex1">is a paragraph. This is a paragraph. This is a paragraph. </p>
<p class="ex2"> is a paragraph. This is a paragraph.</p>
</body>
Link of this Article: CSS font example

Leave a Reply

Your email address will not be published. Required fields are marked *