整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于所有Web開發人員來說，無論你選擇的是哪種框架或后端語言，都需要大量使用HTML（超文本標記語言）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<h1>1級標題</h1>
<h2>2級標題</h2>
<h3>3級標題</h3>
<h4>4級標題</h4>
<h5>5級標題</h5>
<h6>6級標題</h6>
</body>
</html>12345678910111213141516復制代碼類型：[html]圖示
h的級別越小文字大小越小。
當然了，這些文字標題都是左對齊的。
其實在標題標記中還有重要的屬性！詳情見文章------
我們可以給<h1>，<h2>......等標記加屬性值讓其變得更加多樣化！
代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<h1 align="center">1級標題</h1>
<h2 align="left">2級標題</h2>
<h3 align="right">3級標題</h3>
<h4 align="justify">4級標題</h4>
<h5 align="right">5級標題</h5>
<h6 align="center">6級標題</h6>
</body>
</html>12345678910111213141516復制代碼類型：[html]圖示
align標記在----文章已經有些許敘述，我們再來講講吧。
<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左對齊-->
<h3 align="right"></h3> <!--右對齊-->
<h4 align="justify"></h4><!--段落兩端對齊-->1234復制代碼類型：[html]所以圖示才是如此顯示的。
開課吧廣場-人才學習交流平臺
網絡安全字體是由許多操作系統預先安裝的字體。雖然不是所有的系統都安裝了相同的字體，但你可以使用網絡安全字體堆棧來選擇幾種看起來類似的字體，并且安裝在你想支持的各種系統上。如果你想使用預裝字體以外的字體，從CSS3開始，你可以使用網絡字體Web fonts - Learn web development | MDN。
Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
相比通常只有幾十 KB 的英文字體，網頁加載一個 GB2312 的中文字體至少要增加 2 MB 以上加載量，而大部分中文字體都在 5 MB 以上。所以網絡字體在國內沒有流行起來，還是要像英文網頁好多年前一樣，用網頁安全字體。
下表可以看到各系統預置的中文字體——各系統根本沒有相同的字體，即沒有網頁安全中文字體！
系統 | 預置中文字體 |
Mac OS X | 華康蘋方 Pingfang（10.11 開始） 冬青黑體: Hiragino Sans GB （10.6 開始） 華文細黑：STHeiti Light （又名STXihei） 華文黑體：STHeiti 華文楷體：STKaiti 華文宋體：STSong 華文仿宋：STFangsong |
Windows | 微軟雅黑: Microsoft YaHei（Windows 7開始） 黑體: SimHei 宋體: SimSun 新宋體: NSimSun 仿宋: FangSong 楷體: KaiTi 仿宋GB2312: FangSong_GB2312 楷體GB2312: KaiTi_GB2312 |
Android | Droid Sans Fallback |
iOS | 蘋方（iOS 9開始） 黑體：Heiti SC (iOS 8) 華文黑體：STHeiti（iOS 7.0 及以下） |
與網絡安全字體不同，網絡字體沒有預先安裝在用戶的系統中。這些字體是由用戶的瀏覽器在渲染網頁時下載的，然后應用于你的文本。使用網絡字體的主要缺點是它會減慢你網站的加載時間。在舊的瀏覽器中，對CSS3的支持也很有限，而使用網絡字體是需要CSS3的。后面的限制可以通過使用字體堆棧來彌補，類似于網絡安全字體堆棧，但包括一個網絡字體作為堆棧的第一個字體。如果瀏覽器無法使用網絡字體，它就會退回到堆棧中的網絡安全字體。
Unlike web safe fonts, web fonts are not pre-installed on the user's system. The fonts are downloaded by the user's browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site's load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.
Web 字體是一種 CSS 特性，允許我們指定在訪問時隨您的網站一起下載的字體文件，這意味著任何支持 Web 字體的瀏覽器都可以使用指定的字體。所需的語法如下所示：
首先，在 CSS 的開始處有一個@font-face塊，它指定要下載的字體文件：
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}在這個下面，你可以使用 @font-face 中指定的字體種類名稱來將你的定制字體應用到你喜歡的任何東西上，比如說：
html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}關于網頁字體有兩件重要的事情要注意：
serif 是一種具有裝飾性小橫線的字體族，這些小橫線被稱為“襯線”。Serif 字體通常被用于印刷材料中，如書籍、雜志、報紙等，因為它們的襯線可以增強字體的可讀性和易讀性。常見的 Serif 字體包括 Times New Roman、Georgia、和 Garamond。
sans-serif 是一種不帶裝飾性小橫線的字體族。這種字體通常被用于數字屏幕上，如電腦、手機和電視。與 Serif 字體相比，Sans-serif 字體看起來更現代、更簡潔。常見的 Sans-serif 字體包括 Arial、Helvetica 和 Verdana。
monospace 是一種字母寬度相等的字體族，每個字符都占據相同的寬度。Monospace 字體通常用于計算機編程、打印機輸出和其他需要對齊文本的應用程序。常見的 Monospace 字體包括 Courier、Consolas 和 Monaco。
cursive 是一種仿效手寫的字體族，具有曲線、流暢的線條。這種字體通常被用于設計師、藝術家和文具愛好者等需要體現個性和藝術感的場合。常見的 Cursive 字體包括 Brush Script、Lucida Calligraphy 和 Comic Sans。
fantasy 是一種具有藝術性和獨特性的字體族，經常用于海報、書籍封面和廣告等場合。這種字體的外形往往是有趣、古怪、奇特或裝飾性的，常常包含有裝飾性的花紋或圖案。常見的 Fantasy 字體包括 Harrington、Viner Hand ITC 和 Zapfino。
Script 字體族是一類字體，通常被設計用于模擬手寫或手繪效果，以及營造一種自然、隨意的藝術氛圍。這類字體通常具有不規則的筆畫、流暢的曲線和變化多端的字母間距，使得文本看起來像是手寫而非打印。Script 字體族的應用領域非常廣泛，例如印刷品設計、標志設計、廣告設計等。常見的 Script 字體有 Brush Script、Lobster、Pacifico、Vibur 等。
為了確保中文字符在不同計算機和瀏覽器上的正確顯示，網頁設計or開發者可以考慮：
需要注意的是，盡管某些字體在設計中看起來很不錯，但并不一定適合用作 Web 安全字體。設計or開發者需要權衡字體的外觀和可用性，選擇最適合自己需求的中文 Web 安全字體。
節我們來講字體樣式，之前我們學習 HTML 的時候學過一些用于字體加粗、傾斜的標簽，但是使用標簽來實現的效果肯定沒有我們通過 CSS 中的樣式來的方便。
接下來我們會給大家介紹下面這幾個屬性的使用：
通過學習上述這幾個 CSS 屬性，我們可以實現給 HTML 中的文字設置字體、大小、風格、傾斜、加粗等。
font-family 屬性用于設置一個元素的字體，字體就是像宋體、楷體等。
通過 font-family 屬性，可以同時聲明多種字體，字體之間使用逗號分隔。根據字體的調用原則，會優先調用第一種字體，如果沒有找到，則會嘗試調用下一個字體，如果都找不到則調用默認字體。
示例：
例如為下面這個 <p> 標簽中的文本設置字體：
<p>Hello，俠課島</p>
可以使用標簽選擇器，然后在 font-family 屬性中設置：
p{
font-family:'Times New Roman','sans-serif', 宋體, 楷體;
}
在聲明字體時，我們應該分別聲明英文字體和中文字體，且英文字體的聲明應該在中文字體之前。因為絕大部分中文字體里包含英文字母，但是不是很好看，而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文，就一定要記得先聲明英文字體。先聲明的會先調用。
常用英文字體：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字體：宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。
font-size 屬性用于設置字體的大小，常用的單位為 px，即像素。
px 是 Pixel 的縮寫，是可以在數字顯示設備上顯示和表示的數字圖像或圖形的最小單位。像素是數字圖形中的基本邏輯單元，像素也稱為圖像元素。
示例：
例如我們來看下面這段代碼（其他HTML結構代碼沒有展示出來）：
<body>
<h1>斷句</h1>
<p>近水樓臺先得月，向陽花木易為春。</p>
</body>
在瀏覽器中的演示效果為：
然后此時，我們通過 font-size 來將其中的 <h1> 標簽中的字體設置為 14px，<p> 標簽中的字體設置為 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在瀏覽器中演示效果就變為了下圖所示：
很明顯，通過 CSS 中的 font-size 屬性可以設置任意標簽中的字體大小。
font-style 設置字體的風格，可以將字體設置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。
此屬的常用屬性值如下所示：
示例：
將下面三個 <p> 中的內容設置為不同的字體風格，可以使用類選擇器：
<body>
<p class="normal">將字體設置為標準的字體樣式</p>
<p class="italic">將字體設置為斜體的字體樣式</p>
<p class="oblique">將字體設置為傾斜的字體樣式</p>
</body>
CSS 樣式代碼：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在瀏覽器中演示效果如下所示：
font-weight 屬性用于設置顯示元素的文本中所用的字體加粗。
此屬性的常用屬性值如下所示：
示例：
將下面的 <p> 標簽的粗細分別設置為 normal、bold、700、900：
<p class="w1">將字體設置為:normal</p>
<p class="w2">將字體設置為:bold</p>
<p class="w3">將字體設置為:700</p>
<p class="w4">將字體設置為:900</p>
CSS 樣式代碼：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在瀏覽器中演示效果：
font 屬性用于在一個聲明中設置所有的字體屬性，各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。
如果我們使用 font 屬性來設置字體樣式，設置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不設置其中的某個值，未設置的屬性會使用其默認值。
示例：
<p class="p1">草長鶯飛二月天，拂堤楊柳醉春煙。</p>
<p class="p2">留連戲蝶時時舞，自在嬌鶯恰恰啼。</p>
CSS 樣式代碼：
.p1{
font: italic bold 20px 'sans-serif', 楷體;
}
.p2{
font: bold 14px 'Arial', 宋體;
}
在瀏覽器中演示效果：
注意，在使用 font 屬性時，font-size 和 font-family 的值是必需的，如果沒有設置這兩個屬性值，則不會生效。
本節學習的幾個屬性值都是 CSS 中最基本的屬性，特別是 font-size 屬性，我們會經常用到。一般瀏覽器會有一個默認的字體大小，例如 16px，而編寫頁面時如果我們希望大部分頁面內容正文字體大小為 12px 或 14px，就會在 <body> 標簽上設置，這樣就不用一個個標簽去設置。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
