6.CSS字體屬性

.字體大小(font-size)

font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位，也可以使用絕對(duì)長度單位。其中，相對(duì)長度單位比較常用，推薦使用像素單位px，絕對(duì)長度單位使用較少。具體如下：
1em 等于當(dāng)前的字體尺寸。如果一個(gè)元素的 font-size 為 16 像素，那么對(duì)于該元素，1em 就等于 16 像素。在設(shè)置字體大小時(shí)，em 的值會(huì)相對(duì)于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素?？梢允褂眠@個(gè)公式將像素轉(zhuǎn)換為 em：px/16=em（注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：px/20=em）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-size{            font-size: 28px;        }</style></head><body>    <div>碼海無際</div>    <div class="my-font-size">碼海無際</div></body></html>

2.定義字體(font-family)

font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。
可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。
在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持類似微軟雅黑的中文?？梢允褂糜⑽膩硖娲１热?font-family:"Microsoft Yahei"。直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的，font-family: "FAEF6FC5ED1"，表示設(shè)置字體為“微軟雅黑”。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-family{            /*font-family: 宋體;*/            /*font-family: SimSun;*/            /*font-family: B8BF53;*/            font-family: B8BF53,ED1F53;        }</style></head><body>    <div>碼海無際</div>    <div class="my-font-family">碼海無際</div></body></html>

3.字體加粗(font-weight)

范圍值 100 ~ 900 為字體指定了加粗級(jí)別。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別，100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-weight{           /*font-weight: bold;*/           font-weight: 700;        }</style></head><body>    <div>碼海無際</div>    <div class="my-font-weight">碼海無際</div></body></html>

4.字體風(fēng)格(font-style)

常用于設(shè)置斜體文本，該屬性有三個(gè)值：

normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-style{            font-style: italic;        }</style></head><body>    <div>碼海無際</div>    <div class="my-font-style">碼海無際</div></body></html>

5.綜合設(shè)置字體樣式 (font)

font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置
可設(shè)置的屬性是（按順序）："font-style font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默認(rèn)值將被插入，如果有默認(rèn)值的話。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-one {            font-style: italic;            font-weight: bold;            font-size: 20px;            font-family: 宋體;        }        .my-font-two {            font: italic bold 20px 宋體;        }        .my-font-three {            font: 20px 宋體;        }</style></head><body>    <div>碼海無際</div>    <div class="my-font-one">碼海無際</div>    <div class="my-font-two">碼海無際</div>    <div class="my-font-three">碼海無際</div></body></html>

、什么是HTML

HTML簡介

HTML是用來描述網(wǎng)頁的一種語言，它是一種超文本標(biāo)記語言，由一套標(biāo)記標(biāo)簽組成，在制作網(wǎng)頁時(shí)，HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。

發(fā)展史

HTML：Hyper Text Markup Language超文本標(biāo)記語言

超文本標(biāo)記語言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標(biāo)準(zhǔn)）

HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時(shí)。

HTML3.2—1996年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML4.0—1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML4.01（微小改進(jìn)）—1999年12月24日，W3C推薦標(biāo)準(zhǔn)，2000年5月15日發(fā)布基本嚴(yán)格的HTML4.01語法，是國標(biāo)標(biāo)準(zhǔn)化組織和國際電工委員會(huì)的標(biāo)準(zhǔn)

XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布

XHTML1.1—2001年5月31日發(fā)布

XHTML2.0是W3C的工作草案，由于改動(dòng)過大，學(xué)習(xí)這個(gè)新技術(shù)的成本過高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標(biāo)準(zhǔn)。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團(tuán)隊(duì)，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規(guī)范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時(shí)也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁功能，如使用網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)渲染圖形、圖表、圖像和動(dòng)畫，以及不需要安裝任何插件直接使用網(wǎng)頁播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度

HTML的優(yōu)勢(shì)

各大瀏覽器廠商對(duì)H5的支持
市場(chǎng)的需求
跨平臺(tái)

二、HTML的基本結(jié)構(gòu)

<html>......</html> HTML文檔的開始和結(jié)束標(biāo)記。
<head>……</head> 頭控制標(biāo)記，不在界面上進(jìn)行展示，子標(biāo)簽可設(shè)置SEO優(yōu)化的一些內(nèi)容以及設(shè)置網(wǎng)頁的編碼。
<title>……</title>：設(shè)置瀏覽器的窗口上標(biāo)題。
<body>……</body>：頁面可見內(nèi)容。

三、HTML的基本標(biāo)簽

標(biāo)題標(biāo)簽

h1~h6

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h7>這是七級(jí)標(biāo)題</h7>效果怎么顯示不出來呢？？？

</body>

</html>

瀏覽器預(yù)覽效果

段落標(biāo)簽和換行標(biāo)簽

p標(biāo)簽為段落標(biāo)簽，br標(biāo)簽為換行標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>段落和換行標(biāo)簽</title>

</head>

<body>

<h1>北京歡迎你</h1>

<p>北京歡迎你，<br>為你開天辟地</p>

<p>北京歡迎你，<br/>有有勇氣就會(huì)有奇跡</p>

</body>

</html>

瀏覽器預(yù)覽效果圖

水平線標(biāo)簽

hr標(biāo)簽為水平線標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了半年的積蓄，<br>漂洋過海來看你</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

字體樣式標(biāo)簽

em為斜體標(biāo)簽，strong為字體加粗標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>字體樣式標(biāo)簽</title>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br>

<em><strong>漂洋過海</strong></em>來看你

</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

注釋和特殊符號(hào)

注釋使用：

大于號(hào)：> great than的縮寫

小于號(hào)：< less than的縮寫

雙引號(hào)：""

版權(quán)符號(hào)：©

空格：

源代碼

<!DOCTYPE html>

<head>

<title>注釋和特殊符號(hào)</title>

</head>

<body>

<pre>

注釋使用：

大于號(hào)：> great than的縮寫

小于號(hào)：< less than的縮寫

雙引號(hào)：""

版權(quán)符號(hào)：©

空格：

</pre>

5<10>6 <br>

"我是被雙引號(hào)引起來的內(nèi)容"<br>

©自由職業(yè)開發(fā)者公司<br>

我是測(cè)試空格的

</body>

</html>

瀏覽器預(yù)覽效果圖

以上就是HTML的簡單入門，后續(xù)帶大家更深入的了解HTML

節(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

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

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

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

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

font 屬性用于在一個(gè)聲明中設(shè)置所有的字體屬性，各個(gè)屬性之間使用空格隔開。也就是上述幾個(gè)屬性的綜合簡寫屬性。

如果我們使用 font 屬性來設(shè)置字體樣式，設(shè)置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family?？梢圆辉O(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é)

本節(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è)置。

在線咨詢

上一篇：當(dāng)您在瀏覽器中輸入網(wǎng)址時(shí)會(huì)發(fā)生什么？
下一篇：Arm 發(fā)布 Neoverse 新品：數(shù)據(jù)分析性能提

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

6.CSS字體屬性

.字體大小(font-size)

2.定義字體(font-family)

3.字體加粗(font-weight)

4.字體風(fēng)格(font-style)

5.綜合設(shè)置字體樣式 (font)

、什么是HTML

二、HTML的基本結(jié)構(gòu)

三、HTML的基本標(biāo)簽

font-family

font-size

font-style

font-weight

font

總結(jié)

您的項(xiàng)目需求

、什么是HTML