前,瀏覽器只能展示本地安裝的字體。如果字體未安裝,網頁顯示效果會大打折扣。
為了解決這個問題,CSS 引入 web 字體,允許瀏覽器從服務器下載字體,下載完成后再重新渲染字體。
使用 web 字體前,需要了解常用的字體文件格式。
TTF 字體文件,即 TrueType 字體,是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。
OTF 字體文件,即 OpenType 字體,是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上,是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件,即 The Web Open Font Format 字體,是一種用于網頁的字體格式,2009 年開發,如今是 W3C(萬維網聯盟)的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體,但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中,WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件,相比于 WOFF,提供了更高的壓縮效率。
SVG 字體,將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范,允許在 SVG 文檔中創建字體。
EOT 字體文件,即 Embedded OpenType Fonts 文件,是微軟設計的一種用于網頁的嵌入式字體,它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示:
不同字體格式的瀏覽器兼容性,截圖數據來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄,然后定義新的字體名稱,并指向字體所在位置。
以京華老宋體為例,這是一款可以免費商用的中文字體。下載字體文件后,放到和 index.html 同級的目錄,重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內,使用 font-family 定義字體名稱,src 屬性定義字體文件路徑。
定義 web 字體
然后,像使用普通字體一樣,使用自定義字體樣式:
使用 web 字體
完
tml作為web編程的入口,因為其元素眾多,所以導致很多新手都無法堅持,今天我們就來聊聊怎么簡單的學習html知識。
一個推薦的學習順序
學習順序圖
下面來說明一下上面的圖,首先學習不可見元素部分,然后學習標題和列表元素部分,然后是表單元素,依次類推,直到學到其他元素,其次,上面的圖已經理清了部分邏輯關系的,比如select的子元素就只有option,ul和ol的共同子元素就只有li等等。
實現一個簡單的頁面
輪廓轉化流程圖
頁面輪廓
實現一個頁面前,我們首先劃出一個大概的輪廓,這里一般采用從整體全局出發的思路,也就是結構化程序設計的思想,自頂向下,逐步求精;首先將頁面分為很大的幾塊,然后對每個分割的塊分別進行再分,直到你已經對該頁面非常熟悉了,這樣基于視角的頁面輪廓就出現了。
用區域元素實現輪廓
有了頁面輪廓,我們接下來需要做的事情就是,用區域元素表示這些分割的塊,這樣我們就能夠得到基于HTML的頁面輪廓,也就是一個頁面的大體情況已經用代碼實現了。
填充區域
上面說到已經用HTML實現了頁面的一個大體輪廓,接下來就是用其他HMTL元素去填充每個區域塊的內容,最后得到我們最終頁面結構,有了這個結構,之后用CSS來美化頁面就可以了,當然為了做一些更酷的效果,比如動畫、旋轉等等,可以用一些高級的CSS3或JavaScript(框架)來實現。
語義化
思考用什么元素
通過實現一個簡單頁面的實踐,你雖然實現了一個簡單的頁面,但是有個問題會出現在你的腦子里面,就是那么多區域元素,我們怎么知道選擇那個區域元素來表示頂部、中部和底部區域呢?別擔心,語義化就是為了解決這個問題的,比如在文章里面,我們就應該用article來布局文章區域部分,而版權等信息可以用address或footer來布局這些區域,對于其他非區域元素,也是一樣,該用表格的部分就用表格,該用表單的部分就用表單來表示,不要亂用,至于為什么要將語義化放在最后來講,是因為語義化是在你已經非常熟悉HTML的時候,才更容易理解,如果一開始就談語義化,估計你會遇到很多不理解的。
通過上面的講解,如果還有什么疑問,在評論中留下,我會單獨解答的,這里推薦一個中文的學習網站w3school,相信你帶著本文中介紹的思路去學習這個網站里面的知識,思路會更清晰一些。
HTML結構
HTML結構
<!DOCTYPE html> - 聲明:當前頁面使用的是哪個HTML版本
<html lang="en">- 根標簽:有且僅有一個
<head>- 用于設置當前頁面的信息
<meta charset="UTF-8"> - 設置當前頁面的編碼
<title>Title</title> - 當前頁面的標題
</head>
<body>- 用于顯示在瀏覽器中
</body>
</html>
聲明
根標簽
<meta>元素
HTML屬性
HTML頁面被搜索引擎抓取
分類
HTML標題
HTML列表
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<dl>
<dt>列表名稱</dt>
dd>列表項</dd>
</dl>
<a href="地址"></a>
鏈接元素<a>
C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html
圖片元素
可選屬性
HTML表格
分類
打算深入了解這個行業的朋友,可以私信我“前端” ,不論你是學生還是想轉行的朋友,我都歡迎,不定期分享干貨,整理的一份2019最新的web前端學習資料和0基礎入門教程分享給大家
*請認真填寫需求信息,我們會在24小時內與您取得聯系。