如何在網(wǎng)頁中使用 web 字體？

前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網(wǎng)頁顯示效果會大打折扣。

為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務(wù)器下載字體，下載完成后再重新渲染字體。

字體文件格式

使用 web 字體前，需要了解常用的字體文件格式。

TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀(jì) 80 年代末開發(fā)的字體標(biāo)準(zhǔn)。它是 macOS 和 Windows 操作系統(tǒng)使用最廣泛的字體格式。

OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎(chǔ)上，是微軟的注冊商標(biāo)。OpenType 字體目前在主要的計算機平臺上廣泛使用。

WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網(wǎng)頁的字體格式，2009 年開發(fā)，如今是 W3C（萬維網(wǎng)聯(lián)盟）的推薦標(biāo)準(zhǔn)。WOFF 本質(zhì)是 OpenType 或 TrueType 字體，但是經(jīng)過壓縮并附加額外的元數(shù)據(jù)。在帶寬受限的網(wǎng)絡(luò)中，WOFF 能更好的支持從服務(wù)器到客戶端的字體傳輸。

WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。

SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規(guī)范定義了一個字體規(guī)范，允許在 SVG 文檔中創(chuàng)建字體。

EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設(shè)計的一種用于網(wǎng)頁的嵌入式字體，它是 OpenType 字體的緊湊形式。

不同字體格式的瀏覽器兼容性下圖所示：

不同字體格式的瀏覽器兼容性，截圖數(shù)據(jù)來自 w3schools.com

使用自定義字體

使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務(wù)器目錄，然后定義新的字體名稱，并指向字體所在位置。

以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。

下載字體文件

在 @font-face 指令內(nèi)，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。

定義 web 字體

然后，像使用普通字體一樣，使用自定義字體樣式：

使用 web 字體

完

tml作為web編程的入口，因為其元素眾多，所以導(dǎo)致很多新手都無法堅持，今天我們就來聊聊怎么簡單的學(xué)習(xí)html知識。

一個推薦的學(xué)習(xí)順序

學(xué)習(xí)順序圖

下面來說明一下上面的圖，首先學(xué)習(xí)不可見元素部分，然后學(xué)習(xí)標(biāo)題和列表元素部分，然后是表單元素，依次類推，直到學(xué)到其他元素，其次，上面的圖已經(jīng)理清了部分邏輯關(guān)系的，比如select的子元素就只有option,ul和ol的共同子元素就只有l(wèi)i等等。

實現(xiàn)一個簡單的頁面

輪廓轉(zhuǎn)化流程圖

頁面輪廓

實現(xiàn)一個頁面前，我們首先劃出一個大概的輪廓，這里一般采用從整體全局出發(fā)的思路，也就是結(jié)構(gòu)化程序設(shè)計的思想，自頂向下，逐步求精；首先將頁面分為很大的幾塊，然后對每個分割的塊分別進行再分，直到你已經(jīng)對該頁面非常熟悉了，這樣基于視角的頁面輪廓就出現(xiàn)了。

用區(qū)域元素實現(xiàn)輪廓

有了頁面輪廓，我們接下來需要做的事情就是，用區(qū)域元素表示這些分割的塊，這樣我們就能夠得到基于HTML的頁面輪廓，也就是一個頁面的大體情況已經(jīng)用代碼實現(xiàn)了。

填充區(qū)域

上面說到已經(jīng)用HTML實現(xiàn)了頁面的一個大體輪廓，接下來就是用其他HMTL元素去填充每個區(qū)域塊的內(nèi)容，最后得到我們最終頁面結(jié)構(gòu)，有了這個結(jié)構(gòu)，之后用CSS來美化頁面就可以了，當(dāng)然為了做一些更酷的效果，比如動畫、旋轉(zhuǎn)等等，可以用一些高級的CSS3或JavaScript（框架）來實現(xiàn)。

語義化

思考用什么元素

通過實現(xiàn)一個簡單頁面的實踐，你雖然實現(xiàn)了一個簡單的頁面，但是有個問題會出現(xiàn)在你的腦子里面，就是那么多區(qū)域元素，我們怎么知道選擇那個區(qū)域元素來表示頂部、中部和底部區(qū)域呢？別擔(dān)心，語義化就是為了解決這個問題的，比如在文章里面，我們就應(yīng)該用article來布局文章區(qū)域部分，而版權(quán)等信息可以用address或footer來布局這些區(qū)域，對于其他非區(qū)域元素，也是一樣，該用表格的部分就用表格，該用表單的部分就用表單來表示，不要亂用，至于為什么要將語義化放在最后來講，是因為語義化是在你已經(jīng)非常熟悉HTML的時候，才更容易理解，如果一開始就談?wù)Z義化，估計你會遇到很多不理解的。

通過上面的講解，如果還有什么疑問，在評論中留下，我會單獨解答的，這里推薦一個中文的學(xué)習(xí)網(wǎng)站w3school，相信你帶著本文中介紹的思路去學(xué)習(xí)這個網(wǎng)站里面的知識，思路會更清晰一些。

tml

概念
前端最核心的技術(shù) HTML + CSS + javascript
HTML - 結(jié)構(gòu) - 骨架
CSS - 樣式 - 效果
JAVASCRIPT - (用戶)行為 - 做的事情
超文本標(biāo)記語言
超文本
文本(txt文件) - 瀏覽器可以直接打開
如果具有中文，可能出現(xiàn)亂碼問題
標(biāo)記
語法結(jié)構(gòu) - <標(biāo)簽名>
注意 - 瀏覽器解析標(biāo)記（規(guī)定的標(biāo)記內(nèi)容）
注意
HTML是不嚴(yán)格的語言
允許不用編寫所有內(nèi)容
標(biāo)簽名沒有明確的規(guī)定(大小寫)
建議標(biāo)簽名使用小寫
XHTML
解釋為嚴(yán)格意義的HTML

HTML結(jié)構(gòu)

HTML結(jié)構(gòu)

<!DOCTYPE html> - 聲明:當(dāng)前頁面使用的是哪個HTML版本

<html lang="en">- 根標(biāo)簽:有且僅有一個

<head>- 用于設(shè)置當(dāng)前頁面的信息

<title>Title</title> - 當(dāng)前頁面的標(biāo)題

</head>

<body>- 用于顯示在瀏覽器中

</body>

</html>

聲明

注意 - 必須在HTML文檔的 0 行 0 列
記住 - HTML5的聲明<!DOCTYPE html>
作用 - 告訴瀏覽器當(dāng)前HTML頁面使用的版本
不同的HTML版本支持不同的標(biāo)記(標(biāo)簽)內(nèi)容

根標(biāo)簽

<html></html>
除聲明以外，所有內(nèi)容全部被包含在根標(biāo)簽中
注意 - 有且僅有一個
標(biāo)記（標(biāo)簽）
起始標(biāo)簽 - 有開始，有結(jié)束
開始標(biāo)簽 - <標(biāo)簽名>
結(jié)束標(biāo)簽 - </標(biāo)簽名>
空標(biāo)簽 - 只有開始標(biāo)簽
<br/>- 換行標(biāo)簽
注意 - 建議使用小寫

<meta>元素

第一個作用 - 設(shè)置當(dāng)前HTML頁面的編碼格式
<meta charset="UTF-8">
第二個作用 - 設(shè)置當(dāng)前HTML頁面的關(guān)鍵字
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
第三個作用 - 設(shè)置當(dāng)前HTML頁面的描述(很少)
<meta name="description" content="Free Web tutorials on HTML and CSS">
第四個作用 - 設(shè)置當(dāng)前HTML頁面的作者
<meta name="author" content="King">

HTML屬性

出現(xiàn)在標(biāo)簽中的開始標(biāo)簽中，而不是結(jié)束標(biāo)簽
格式
屬性名=屬性值
屬性值 - 必須使用雙引號包裹

HTML頁面被搜索引擎抓取

<title>元素 - 頁面的標(biāo)題
<meta name="keywords">元素 - 頁面的關(guān)鍵字
<h1>元素 - 標(biāo)題

分類

私有屬性 - 當(dāng)前標(biāo)簽獨有的屬性
標(biāo)準(zhǔn)屬性 - 幾乎所有標(biāo)簽都有的屬性
事件屬性 - 標(biāo)準(zhǔn)事件(了解)

HTML標(biāo)題

<h1> ~ <h6> - 從最大到最小
并不關(guān)心標(biāo)題顯示的效果 - 可以通過 CSS 完成
關(guān)心標(biāo)題的語義化
語義化 - 當(dāng)前標(biāo)簽的含義

HTML列表

有序列表

<ol>

</ol>

默認(rèn)情況下 - 1,2,3,4,5...
無序列表

<ul>

</ul>

默認(rèn)情況下 - 黑點
定義列表

<dl>

dd>列表項</dd>

</dl>

HTML鏈接

鏈接元素<a>

作用
用于從當(dāng)前頁面跳轉(zhuǎn)到另一個(指定)頁面
實現(xiàn)錨點效果
實現(xiàn)回到頂部效果
實現(xiàn)發(fā)送郵件功能(了解)
href="mailto:郵件地址"
路徑(地址)
絕對路徑 - 查找的開始位置是固定
相對路徑 - 查找的開始位置是變化
在實際開發(fā)中，使用更多
完整的地址
http:// localhost : 8080 /day02 #name
網(wǎng)絡(luò)協(xié)議 IP地址端口號相對路徑錨點
localhost - 等價于 127.0.0.1 - 表示本機
網(wǎng)絡(luò)訪問 - 通過互聯(lián)網(wǎng)
http://192.168.10.165:63342/D...
file:///C:/0507/DAY02/CODE/00.html

C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html

本地訪問 - 和網(wǎng)絡(luò)無關(guān)

圖片元素

<img> - 空標(biāo)簽，沒有結(jié)束標(biāo)簽
必要屬性 - src屬性

可選屬性

width
height
單位
像素值
百分值

HTML表格

概念 - 具有行和列（單元格）
行 - 表示水平方向（多個單元格）
列 - 表示垂直方向（多個單元格）
HTML表格
表示為表格
作用
表格的語義化 - 配合 CSS 可以實現(xiàn)漂亮的表格效果
利用表格的行和列的概念 - 實現(xiàn)頁面元素的布局
HTML表單
<form>標(biāo)簽
語義化 - 表示為表單
容器元素 - 瀏覽器中不會有任何顯示效果
文件的編碼格式 - UTF-8
HTML頁面的編碼格式 - UTF-8
<meta charset="UTF-8">
設(shè)置當(dāng)前HTML頁面的編碼格式
在瀏覽器運行當(dāng)前HTML頁面時，告訴瀏覽器當(dāng)前的編碼格式
字符集
概念 - 存放所使用的所有的字符（漢字）

分類

ANSI - 美國
ISO-8859-1 - 歐洲
GBK - 中國
GB2312
Unicode - 萬國碼
UTF-8 - 主要使用
UTF-16
計算機的存儲方式
利用二進制方式 - 1和0
中國
存儲 - 將漢字 "中國" 轉(zhuǎn)換成二進制進行存儲 - GBK
讀取 - 將二進制轉(zhuǎn)換成 "中國" 進行顯示 - UTF-8

打算深入了解這個行業(yè)的朋友，可以私信我“前端” ，不論你是學(xué)生還是想轉(zhuǎn)行的朋友，我都?xì)g迎，不定期分享干貨，整理的一份2019最新的web前端學(xué)習(xí)資料和0基礎(chǔ)入門教程分享給大家

在線咨詢

上一篇：PHP 頁面跳轉(zhuǎn)到另一個頁面的幾種方法分享
下一篇：（HTML完結(jié)篇）制作一個簡單頁面(詳解)-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項目需求

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

整合營銷服務(wù)商

如何在網(wǎng)頁中使用 web 字體？

字體文件格式

使用自定義字體

tml

您的項目需求