整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一個聲明中設置所有的字體屬性 |
font-family | 字體名稱、inherit | 設置字體類型 |
font-size | xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit | 設置字體大小 |
font-weight | normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 設置字體粗細 |
font-style | normal、italic、oblique、inherit | 設置字體風格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隸書;
line-height: 28px;
}
span {
font: italic 16px 華文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技術</h3>
<span
>在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
系統，就必須掌握 Web 前端技術。</span
>
</body>
</html>顯示為，
（2）CSS 中鏈接標簽可用的偽類：
CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。
鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。
狀態 | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。
狀 態 | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍色 | 無 | 無下畫線 |
鼠標移到 | 黑色 | #DDDDDD | 下畫線 |
正單擊 | 紅色 | #AAAAAA | 刪除線 |
已訪問 | 綠色 | 無 | 無下畫線 |
對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">這是一個鏈接</a>
</body>
</html>
顯示為，
為什么要按照這樣的順序來使用呢？ 調整幾個偽類的順序，看看會發生什么。
我們把 a:link 放到最后，效果如下：
從圖中可以發現其中的樣式屬性都被覆蓋了。
（3）列表相關的樣式屬性：
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個聲明中設置所有的列表屬性 |
list-style-image | URL、none | 設置圖像為列表項標志 |
list-style-position | inside、outside、inherit | 設置列表中列表項標志的位置 |
list-style-type | disc（默認）、circle、square、decimal 等 | 設置列表項標志的類型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif體效果
<h1></h1> 標題字(最大)
<h6></h6> 標題字(最小)
<h1 align="center"></h1>
<strong></strong> 粗體字(突出強調)
<b></b> 粗體字(bold:粗體)
<i></i> 斜體字(italic:斜體)
<u></u> 底線,文本添加下劃線：(underline:下劃線)
<strike></strike>或<s></s> 橫線,相當于加刪除線文本 <del></del> HTML5等寬文字標簽:對于等寬文字設置多數情況用在英文文字顯示中
<tt></tt> 打字體,類似打字機或者等寬的文本效果。
<code></code> 等寬文字設置內容(定義計算機代碼文本)
<samp></samp> 等寬文字設置內容(定義樣本文本)
<kbd> 定義鍵盤文本。
<sup></sup> 文字上標字體標簽(super)
<sub></sub> 文字下標字體標簽(subscipt)
<address></address> 設置地址文字(可定義一個地址,比如電子郵件地址。您應當使用它來定義地址、簽名或者文檔的作者身份。)
<font></font> 編輯網頁文字樣式
<font face="" size="" color=""></font>face屬性可以用于設置文字的名稱,可以是宋體、隸書、楷體等;
size屬性用于設置字號的大小(單位:字號),從 1 到 7 的數字,或h1-h6。瀏覽器默認值是3。
color用于設置字體的顏色
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>手冊上沒有
<ruby></ruby>和<rt></rt> 設置文字標注標記
實例:
<ruby>當代最可愛的人<rt>志愿軍</rt></ruby>然一些常見中文字體，例如“宋體”，“微軟雅黑”等，直接使用中文名稱作為CSS font-family的屬性值也能生效，但我們一般都不使用中文名稱，而是使用英文名稱，主要是規避亂碼的風險。還有一些中文字體，直接使用中文名稱作為CSS font-family的屬性值是沒有效果的，如“思源黑體”， “蘭亭黑體”等，需要使用對應的英文字體名稱才可以。
總而言之一句話，你要想使用中文字體，就必須要知道其對應的英文名稱。
我在網上搜索相關資料的時候，發現幾乎唯一流傳一份中英文對應數據是2010年某位同學整理的，現在已經2017年了，所以其中不少內容已經過時了，如“仿宋_GB2312”、“楷體_GB2312” windows7及其以后版本都沒有了；同時有很多遺漏和缺失的地方，例如OS X新晉“蘋方”等字體。
所以，我特意花了一兩天的時間，對以往的數據進行了修正和補充，保證每一個字體都在不同系統下一個一個親自測試驗證，整理了一份更完善的中文字體英文名稱對應關系一覽表，您可以狠狠地點擊這里：CSS font-family中文字體對應的英文名稱一覽表demo
列表不僅僅是顯示了對應關系，本身就是基于自身所表示的字體來渲染的，因此，某種意義上可以檢測你的電腦是否安裝了此字體，例如，“黑體”這一個表格行的CSS font-family全部都是使用的“黑體”，并且可以切換為瀏覽器默認字體來對照效果，如下截圖所示：
但是一種操作系統，肯定是無法看全所有字體效果的，因此你也可以直接看下面的完整的截圖效果：
開源字體部分
新增部分版權字體，如方正系列字體和漢儀系列字體的中文和英文對應關系圖。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
