CSS 字體(font)實例
CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
CSS 字體系列
在 CSS 中，有兩種不同類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
Serif 字體
Sans-serif 字體
Monospace 字體
Cursive 字體
Fantasy 字體
CSS 字體屬性
屬性 描述
font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family 設置字體系列。
font-size 設置字體的尺寸。
font-size-adjust 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style 設置字體風格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設置字體的粗細。
######
family-name
generic-family
用於某個元素的字體族名稱或/及類族名稱的一個優先表。
默認值：取決於瀏覽器。
inherit 規定應該從父元素繼承字體系列。
值 描述
normal 默認值。瀏覽器顯示一個標准的字體樣式。
italic 瀏覽器會顯示一個斜體的字體樣式。
oblique 瀏覽器會顯示一個傾斜的字體樣式。
inherit 規定應該從父元素繼承字體樣式。
1.設置文本的字體
本例演示如何設置文本字體。
<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.設置字體尺寸
本例演示如何設置字體尺寸。
<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.設置字體風格
本例演示如何設置字體風格。
<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.設置字體的異體
本例演示如何設置字體的異體。
<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.設置字體的粗細
本例演示如何設置字體的粗細。
<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.所有字體屬性在一個聲明之內
本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。
<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>
CSS 字體(font)實例
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。