整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于所有Web開發(fā)人員來說，無論你選擇的是哪種框架或后端語言，都需要大量使用HTML（超文本標(biāo)記語言）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<h1>1級(jí)標(biāo)題</h1>
<h2>2級(jí)標(biāo)題</h2>
<h3>3級(jí)標(biāo)題</h3>
<h4>4級(jí)標(biāo)題</h4>
<h5>5級(jí)標(biāo)題</h5>
<h6>6級(jí)標(biāo)題</h6>
</body>
</html>12345678910111213141516復(fù)制代碼類型：[html]圖示
h的級(jí)別越小文字大小越小。
當(dāng)然了，這些文字標(biāo)題都是左對(duì)齊的。
其實(shí)在標(biāo)題標(biāo)記中還有重要的屬性！詳情見文章------
我們可以給<h1>，<h2>......等標(biāo)記加屬性值讓其變得更加多樣化！
代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<h1 align="center">1級(jí)標(biāo)題</h1>
<h2 align="left">2級(jí)標(biāo)題</h2>
<h3 align="right">3級(jí)標(biāo)題</h3>
<h4 align="justify">4級(jí)標(biāo)題</h4>
<h5 align="right">5級(jí)標(biāo)題</h5>
<h6 align="center">6級(jí)標(biāo)題</h6>
</body>
</html>12345678910111213141516復(fù)制代碼類型：[html]圖示
align標(biāo)記在----文章已經(jīng)有些許敘述，我們?cè)賮碇v講吧。
<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左對(duì)齊-->
<h3 align="right"></h3> <!--右對(duì)齊-->
<h4 align="justify"></h4><!--段落兩端對(duì)齊-->1234復(fù)制代碼類型：[html]所以圖示才是如此顯示的。
開課吧廣場(chǎng)-人才學(xué)習(xí)交流平臺(tái)
網(wǎng)絡(luò)安全字體是由許多操作系統(tǒng)預(yù)先安裝的字體。雖然不是所有的系統(tǒng)都安裝了相同的字體，但你可以使用網(wǎng)絡(luò)安全字體堆棧來選擇幾種看起來類似的字體，并且安裝在你想支持的各種系統(tǒng)上。如果你想使用預(yù)裝字體以外的字體，從CSS3開始，你可以使用網(wǎng)絡(luò)字體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 的英文字體，網(wǎng)頁加載一個(gè) GB2312 的中文字體至少要增加 2 MB 以上加載量，而大部分中文字體都在 5 MB 以上。所以網(wǎng)絡(luò)字體在國內(nèi)沒有流行起來，還是要像英文網(wǎng)頁好多年前一樣，用網(wǎng)頁安全字體。
下表可以看到各系統(tǒng)預(yù)置的中文字體——各系統(tǒng)根本沒有相同的字體，即沒有網(wǎng)頁安全中文字體！
系統(tǒng) | 預(yù)置中文字體 |
Mac OS X | 華康蘋方 Pingfang（10.11 開始） 冬青黑體: Hiragino Sans GB （10.6 開始） 華文細(xì)黑：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 及以下） |
與網(wǎng)絡(luò)安全字體不同，網(wǎng)絡(luò)字體沒有預(yù)先安裝在用戶的系統(tǒng)中。這些字體是由用戶的瀏覽器在渲染網(wǎng)頁時(shí)下載的，然后應(yīng)用于你的文本。使用網(wǎng)絡(luò)字體的主要缺點(diǎn)是它會(huì)減慢你網(wǎng)站的加載時(shí)間。在舊的瀏覽器中，對(duì)CSS3的支持也很有限，而使用網(wǎng)絡(luò)字體是需要CSS3的。后面的限制可以通過使用字體堆棧來彌補(bǔ)，類似于網(wǎng)絡(luò)安全字體堆棧，但包括一個(gè)網(wǎng)絡(luò)字體作為堆棧的第一個(gè)字體。如果瀏覽器無法使用網(wǎng)絡(luò)字體，它就會(huì)退回到堆棧中的網(wǎng)絡(luò)安全字體。
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 特性，允許我們指定在訪問時(shí)隨您的網(wǎng)站一起下載的字體文件，這意味著任何支持 Web 字體的瀏覽器都可以使用指定的字體。所需的語法如下所示：
首先，在 CSS 的開始處有一個(gè)@font-face塊，它指定要下載的字體文件：
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}在這個(gè)下面，你可以使用 @font-face 中指定的字體種類名稱來將你的定制字體應(yīng)用到你喜歡的任何東西上，比如說：
html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}關(guān)于網(wǎng)頁字體有兩件重要的事情要注意：
serif 是一種具有裝飾性小橫線的字體族，這些小橫線被稱為“襯線”。Serif 字體通常被用于印刷材料中，如書籍、雜志、報(bào)紙等，因?yàn)樗鼈兊囊r線可以增強(qiáng)字體的可讀性和易讀性。常見的 Serif 字體包括 Times New Roman、Georgia、和 Garamond。
sans-serif 是一種不帶裝飾性小橫線的字體族。這種字體通常被用于數(shù)字屏幕上，如電腦、手機(jī)和電視。與 Serif 字體相比，Sans-serif 字體看起來更現(xiàn)代、更簡潔。常見的 Sans-serif 字體包括 Arial、Helvetica 和 Verdana。
monospace 是一種字母寬度相等的字體族，每個(gè)字符都占據(jù)相同的寬度。Monospace 字體通常用于計(jì)算機(jī)編程、打印機(jī)輸出和其他需要對(duì)齊文本的應(yīng)用程序。常見的 Monospace 字體包括 Courier、Consolas 和 Monaco。
cursive 是一種仿效手寫的字體族，具有曲線、流暢的線條。這種字體通常被用于設(shè)計(jì)師、藝術(shù)家和文具愛好者等需要體現(xiàn)個(gè)性和藝術(shù)感的場(chǎng)合。常見的 Cursive 字體包括 Brush Script、Lucida Calligraphy 和 Comic Sans。
fantasy 是一種具有藝術(shù)性和獨(dú)特性的字體族，經(jīng)常用于海報(bào)、書籍封面和廣告等場(chǎng)合。這種字體的外形往往是有趣、古怪、奇特或裝飾性的，常常包含有裝飾性的花紋或圖案。常見的 Fantasy 字體包括 Harrington、Viner Hand ITC 和 Zapfino。
Script 字體族是一類字體，通常被設(shè)計(jì)用于模擬手寫或手繪效果，以及營造一種自然、隨意的藝術(shù)氛圍。這類字體通常具有不規(guī)則的筆畫、流暢的曲線和變化多端的字母間距，使得文本看起來像是手寫而非打印。Script 字體族的應(yīng)用領(lǐng)域非常廣泛，例如印刷品設(shè)計(jì)、標(biāo)志設(shè)計(jì)、廣告設(shè)計(jì)等。常見的 Script 字體有 Brush Script、Lobster、Pacifico、Vibur 等。
為了確保中文字符在不同計(jì)算機(jī)和瀏覽器上的正確顯示，網(wǎng)頁設(shè)計(jì)or開發(fā)者可以考慮：
需要注意的是，盡管某些字體在設(shè)計(jì)中看起來很不錯(cuò)，但并不一定適合用作 Web 安全字體。設(shè)計(jì)or開發(fā)者需要權(quán)衡字體的外觀和可用性，選擇最適合自己需求的中文 Web 安全字體。
節(jié)我們來講字體樣式，之前我們學(xué)習(xí) HTML 的時(shí)候?qū)W過一些用于字體加粗、傾斜的標(biāo)簽，但是使用標(biāo)簽來實(shí)現(xiàn)的效果肯定沒有我們通過 CSS 中的樣式來的方便。
接下來我們會(huì)給大家介紹下面這幾個(gè)屬性的使用：
通過學(xué)習(xí)上述這幾個(gè) CSS 屬性，我們可以實(shí)現(xiàn)給 HTML 中的文字設(shè)置字體、大小、風(fēng)格、傾斜、加粗等。
font-family 屬性用于設(shè)置一個(gè)元素的字體，字體就是像宋體、楷體等。
通過 font-family 屬性，可以同時(shí)聲明多種字體，字體之間使用逗號(hào)分隔。根據(jù)字體的調(diào)用原則，會(huì)優(yōu)先調(diào)用第一種字體，如果沒有找到，則會(huì)嘗試調(diào)用下一個(gè)字體，如果都找不到則調(diào)用默認(rèn)字體。
示例：
例如為下面這個(gè) <p> 標(biāo)簽中的文本設(shè)置字體：
<p>Hello，俠課島</p>
可以使用標(biāo)簽選擇器，然后在 font-family 屬性中設(shè)置：
p{
font-family:'Times New Roman','sans-serif', 宋體, 楷體;
}
在聲明字體時(shí)，我們應(yīng)該分別聲明英文字體和中文字體，且英文字體的聲明應(yīng)該在中文字體之前。因?yàn)榻^大部分中文字體里包含英文字母，但是不是很好看，而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文，就一定要記得先聲明英文字體。先聲明的會(huì)先調(diào)用。
常用英文字體：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字體：宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。
font-size 屬性用于設(shè)置字體的大小，常用的單位為 px，即像素。
px 是 Pixel 的縮寫，是可以在數(shù)字顯示設(shè)備上顯示和表示的數(shù)字圖像或圖形的最小單位。像素是數(shù)字圖形中的基本邏輯單元，像素也稱為圖像元素。
示例：
例如我們來看下面這段代碼（其他HTML結(jié)構(gòu)代碼沒有展示出來）：
<body>
<h1>斷句</h1>
<p>近水樓臺(tái)先得月，向陽花木易為春。</p>
</body>
在瀏覽器中的演示效果為：
然后此時(shí)，我們通過 font-size 來將其中的 <h1> 標(biāo)簽中的字體設(shè)置為 14px，<p> 標(biāo)簽中的字體設(shè)置為 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在瀏覽器中演示效果就變?yōu)榱讼聢D所示：
很明顯，通過 CSS 中的 font-size 屬性可以設(shè)置任意標(biāo)簽中的字體大小。
font-style 設(shè)置字體的風(fēng)格，可以將字體設(shè)置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體。
此屬的常用屬性值如下所示：
示例：
將下面三個(gè) <p> 中的內(nèi)容設(shè)置為不同的字體風(fēng)格，可以使用類選擇器：
<body>
<p class="normal">將字體設(shè)置為標(biāo)準(zhǔn)的字體樣式</p>
<p class="italic">將字體設(shè)置為斜體的字體樣式</p>
<p class="oblique">將字體設(shè)置為傾斜的字體樣式</p>
</body>
CSS 樣式代碼：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在瀏覽器中演示效果如下所示：
font-weight 屬性用于設(shè)置顯示元素的文本中所用的字體加粗。
此屬性的常用屬性值如下所示：
示例：
將下面的 <p> 標(biāo)簽的粗細(xì)分別設(shè)置為 normal、bold、700、900：
<p class="w1">將字體設(shè)置為:normal</p>
<p class="w2">將字體設(shè)置為:bold</p>
<p class="w3">將字體設(shè)置為:700</p>
<p class="w4">將字體設(shè)置為:900</p>
CSS 樣式代碼：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在瀏覽器中演示效果：
font 屬性用于在一個(gè)聲明中設(shè)置所有的字體屬性，各個(gè)屬性之間使用空格隔開。也就是上述幾個(gè)屬性的綜合簡寫屬性。
如果我們使用 font 屬性來設(shè)置字體樣式，設(shè)置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性會(huì)使用其默認(rèn)值。
示例：
<p class="p1">草長鶯飛二月天，拂堤楊柳醉春煙。</p>
<p class="p2">留連戲蝶時(shí)時(shí)舞，自在嬌鶯恰恰啼。</p>
CSS 樣式代碼：
.p1{
font: italic bold 20px 'sans-serif', 楷體;
}
.p2{
font: bold 14px 'Arial', 宋體;
}
在瀏覽器中演示效果：
注意，在使用 font 屬性時(shí)，font-size 和 font-family 的值是必需的，如果沒有設(shè)置這兩個(gè)屬性值，則不會(huì)生效。
本節(jié)學(xué)習(xí)的幾個(gè)屬性值都是 CSS 中最基本的屬性，特別是 font-size 屬性，我們會(huì)經(jīng)常用到。一般瀏覽器會(huì)有一個(gè)默認(rèn)的字體大小，例如 16px，而編寫頁面時(shí)如果我們希望大部分頁面內(nèi)容正文字體大小為 12px 或 14px，就會(huì)在 <body> 標(biāo)簽上設(shè)置，這樣就不用一個(gè)個(gè)標(biāo)簽去設(shè)置。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
