CSS 字型(font)例項
阿新 • • 發佈：2018-11-16
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>