CSS字體：詳解font屬性

2020-03-24 17:15:17

字體：大中小

來源：轉載

供稿：網友

CSS字體 font屬性很重要，他可以用來控制文本的顯示，它可以定義文本的字體、大小、加粗、風格（如斜體）和變形（小型大寫字母）。本文我們就來詳細講解下font屬性。font屬性具有較強的繼承性，如對body設定的font-family、font-size等，都會應用到body包含的所有元素。字體系列font-family屬性定義元素中文本的字體系列或具體的一種字體。body {font-family: sans-serif;} //這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），并將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到body中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。
div {font-family: Georgia;} //指定一種字體。
div {font-family: Georgia,serif;} //指定多種字體或字體系列。
div {font-family: Georgia,serif,'New Century Schoolbook';} //當字體名中有一個或多個空格（比如 New York），或者如果字體名包括#或$之類的符號，我們需要在font-family聲明中加引號。注意：在font-family屬性中聲明多個字體時，瀏覽器會從左至右查找這些字體。如果系統中存在該字體就予以顯示，如果不存在則繼續查找下一個。如果所有指定的字體或字體系列都沒有，則會以系統或瀏覽器默認字體顯示。在CSS中，有兩種不同類型的字體系列名稱：
通用字體系列 ndash; 擁有相似外觀的字體系統組合（比如 “Serif” 或 “Monospace”）
特定字體系列 – 具體的字體系列（比如 “Times” 或 “Courier”）除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：Serif、Sans-serif、Monospace、Cursive和Fantasy。字體大小font-size屬性設置文本的大小，值可以是絕對值(12px)或相對值(1em、100%)。div {font-size:18px;} //絕對值
div {font-size:1.2em;} //相對值絕對值的優缺點：將文本設置為指定的大小、不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）、絕對大小在確定了輸出的物理尺寸時很有用。
相對值的優缺點：相對于周圍的元素來設置大小、允許用戶在瀏覽器改變文本大小。注意：如果你沒有規定字體大小，一般瀏覽器中普通文本（如段落）的默認大小是16像素(1em=16px)。
使用以像素為單位的絕對值有利于我們精確控制文本字體大小，但是在IE中無法縮放文本大小(絕對值的劣勢)。body {font-size:100%;} //為 body 元素（父元素）以百分比設置默認的font-size值
h1 {font-size:3.75em;}
p {font-size:0.875em;}上面的代碼結合使用了百分百和EM，在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。字體加粗font-weight屬性設置文本的粗細程度，值可以是bold(加粗)、normal(正常)、100~900(值越大文字越粗)。p {font-weight:normal;} //正常
strong {font-weight:bold;} //加粗顯示，相當于數值700
div {font-weight:900;} //加粗顯示注意：100~900為字體指定了9級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100對應最細的字體變形，900對應最粗的字體變形。數字400等價于 normal，而700等價于 bold。字體風格font-style屬性最常用于規定斜體文本，它的三個值：normal(正常顯示)、italic(斜體顯示)和oblique(傾斜顯示)。div {font-style:italic;} //元素中的文本斜體顯示注意：通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。字體變形font-variant屬性設定小型大寫字母顯示文本，即所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。它的默認值是normal(正常顯示)。div {font-variant:small-caps;} //small-caps屬性值設定元素中文本以“小型大寫字母”顯示font屬性簡寫與css background屬性一樣，font屬性也有自己的簡寫方式。
書寫順序為：字體風格、字體變形、字體加粗、字體大小/行高、字體系列。div#blog54173 {font:italic small-caps bold 12px/20px "SimHei";} //斜體、小型大寫字母、加粗、12像素大小/20像素行高、黑體注意：如果簡寫了元素的font屬性，而且元素另外還有line-height屬性(行高)需要聲明的話，line-height屬性一定要書寫在簡寫的font屬性之后，否則會導致line-height聲明無效。在font屬性控制的5項中，字體系列、大小、加粗使用頻繁，必須掌握。對中文頁面來說，小型大寫字母并不常用
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML基礎知識——css樣式表,樣式屬性,格式與布局詳解

下一篇：Html-Css(新手入門第一篇必看攻略)