整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
以下HTML標記用于格式化網頁上文本的外觀。這可以使網頁變得更加生動，但是，文本格式的太多變化也會使人不快。
head標記有6個級別可用，從h1用于最大和最重要的標題，到h6是最小的標題。
b標記之間的文本以粗體顯示，與周圍的文本相對突出。
i標記以一個小角度顯示文本。
u標記在文本正文添加一條線，請注意，鏈接已經有下劃線，不需要額外的標記。
strike標記在文本的正中間畫一條線，通常用來表示文本是舊的，不再相關，刪除。也可以用<s></s>代替。
pre標記之間的任何文本，包括空格、回車符和標點符號，都將像在文本編輯器中一樣顯示在瀏覽器中（通常瀏覽器會忽略多個空格）
code標記之間的文本以固定寬度字體顯示，通常在顯示源代碼時使用。
tt標記之間的文本就像是用打字機打出了一個固定寬度的文字。
blockquote標記定義一個塊引用，并且在塊的左右添加額外的邊距。
small標記讓你無需設置字體大小，就可以使文本呈現(xiàn)比周圍稍小的外觀。
font標記的color屬性改變幾個字或一段文字的顏色。屬性使用十六進制顏色代碼。
font標記的size屬性改變字體的大小，值范圍從1到7，1是最小，7是最大。
font標記的size屬性還可以相對于其前面的字體大小的作即時更改，此用法將按你指定的數(shù)字增減字體大小。例如：<font size="-1">一些文本</font>
font標記的face屬性以指定的字體顯示文本，值為字體名稱，如“Helvetica”、“Arial”或“Courier”。
center標記之間的所有內容都居中。
em標記用于強調文本，文本通常以斜體顯示，可能會根據(jù)瀏覽器的不同而有所不同。
strong標記用于著重強調文本，通常以粗體顯示，可能會根據(jù)瀏覽器的不同而有所不同。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發(fā)的字體標準。它是 macOS 和 Windows 操作系統(tǒng)使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發(fā)，如今是 W3C（萬維網聯(lián)盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數(shù)據(jù)。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規(guī)范定義了一個字體規(guī)范，允許在 SVG 文檔中創(chuàng)建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數(shù)據(jù)來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
字是網頁展示的重要內容之一，所以對文字的修飾也是CSS重點關注的一部分， CSS提供了以下常用的樣式屬性來修飾文字。
color 用來設置文字顏色。
設置方式支持以下幾種格式
<style>
.box {
color: red;
}
</style>
<div class="box">文字顏色</div><style>
.box {
color: #ff0000;
}
.box1 {
color: #f00;
}
</style>
<div class="box">文字顏色</div>
<div class="box1">簡寫形式</div><style>
.box {
color: rgb(255, 0, 0);
}
</style>
<div class="box">文字顏色</div><style>
.box {
color: rgba(255, 0, 0, 0.5);
}
</style>
<div class="box">文字顏色</div>font-size 屬性用來設置字體大小，單位通常為px 也可以為em,rem
單位的解釋
<style>
.box {
font-size: 30px;
}
</style>
<div class="box">文字大小</div>設置字體的粗細程度，常用的屬性有 normal 和 bold 兩個值。
可以用以下值表示，也可以用數(shù)字表示。
值 | 意義 |
normal | 正常粗細，和400值相等 |
bold | 加粗，與700數(shù)值相等 |
lighter | 比 正常粗細還細， 不常用 |
bolder | 比 加粗還粗，不常用 |
100 200 300 400 500 600 700 800 900 | 使用數(shù)字定義字體粗細 |
inherit | 從父元素繼承字體粗細 |
<style>
.box_normal {
font-weight: normal;
}
.box_bold {
font-weight: bold;
}
.box_lighter {
font-weight: lighter;
}
.box_bolder {
font-weight: bolder;
}
.box_number {
font-weight: 600;
}
</style>
<body>
<div class="box_normal">font-weight演示：正常粗細</div>
<div class="box_bold">font-weight演示，加粗</div>
<div class="box_lighter">font-weight演示，更細</div>
<div class="box_bolder">font-weight演示， 更粗</div>
<div class="box_number">font-weight演示， 數(shù)字</div>
</body>設置字體的傾斜程度
值 | 意義 |
normal | 正常字體， 不帶傾斜效果 |
italic | 傾斜字體（常用，使用傾斜字體） |
oblique | 傾斜字體（用常規(guī)字體模擬傾斜，不常用） |
<style>
.box1 {
font-style: normal;
}
.box2 {
font-style: italic;
}
.box3 {
font-style: oblique;
}
</style>
<body>
<div class="box1">正常字體</div>
<div class="box2">傾斜字體</div>
<div class="box3">傾斜字體2</div>
</body>設置文本的修飾線的樣式
示例 | 意義 |
none | 無線(a標簽去除下劃線會用到) |
underline; | 下劃線 |
line-through; | 刪除線 |
…等等 | 還有很多，可自行百度 |
<style>
.decoration-none {
text-decoration: none;
}
.decoration-underline {
text-decoration: underline;
}
.decoration-line-through {
text-decoration: line-through;
}
</style>
<body>
<div class="decoration-none">無線修飾</div>
<div class="decoration-underline">下劃線</div>
<div class="decoration-line-through">刪除線</div>
</body>指定使用的字體族，操作系統(tǒng)一般自帶很多字體；
例如：window操作系統(tǒng)中的 ‘微軟雅黑’ ，黑體等。
字體文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。
font-family 可以一次指定多個字體， 后面的字體屬于后備字體，只有前面的字體沒有找到，才會使用后面的字體。
<style>
div {
font-family: serif, "Time New Roman", "微軟雅黑"
}
</style>
<body>
<div>字體</div>
</body>自定義字體
某些時候，我們的字體比較個性化，或者我們的字體是一個圖標字體（一種用符號表示圖片的方式）。那么此時，需要我們使用 @font-face 自定義字體
自定義的字體一般是隨著網頁發(fā)布在服務器端，操作系統(tǒng)中并沒有。
推薦一個比較好用的字體庫網站：https://www.iconfont.cn/（具體使用方式請自行百度）。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
