整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          如何在網頁中使用 web 字體?

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

          為了解決這個問題,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,相信你帶著本文中介紹的思路去學習這個網站里面的知識,思路會更清晰一些。

          tml

          • 概念
          • 前端最核心的技術 HTML + CSS + javascript
          • HTML - 結構 - 骨架
          • CSS - 樣式 - 效果
          • JAVASCRIPT - (用戶)行為 - 做的事情
          • 超文本標記語言
          • 超文本
          • 文本(txt文件) - 瀏覽器可以直接打開
          • 如果具有中文,可能出現亂碼問題
          • 標記
          • 語法結構 - <標簽名>
          • 注意 - 瀏覽器解析標記(規定的標記內容)
          • 注意
          • HTML是不嚴格的語言
          • 允許不用編寫所有內容
          • 標簽名沒有明確的規定(大小寫)
          • 建議標簽名使用小寫
          • XHTML
          • 解釋為嚴格意義的HTML



          HTML結構

          HTML結構

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

          <html lang="en">- 根標簽:有且僅有一個

          <head>- 用于設置當前頁面的信息

          <meta charset="UTF-8"> - 設置當前頁面的編碼

          <title>Title</title> - 當前頁面的標題

          </head>

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

          </body>

          </html>

          聲明

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

          根標簽

          • <html></html>
          • 除聲明以外,所有內容全部被包含在根標簽中
          • 注意 - 有且僅有一個
          • 標記(標簽)
          • 起始標簽 - 有開始,有結束
          • 開始標簽 - <標簽名>
          • 結束標簽 - </標簽名>
          • 空標簽 - 只有開始標簽
          • <br/>- 換行標簽
          • 注意 - 建議使用小寫

          <meta>元素

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

          HTML屬性

          • 出現在標簽中的開始標簽中,而不是結束標簽
          • 格式
          • 屬性名=屬性值
          • 屬性值 - 必須使用雙引號包裹

          HTML頁面被搜索引擎抓取

          • <title>元素 - 頁面的標題
          • <meta name="keywords">元素 - 頁面的關鍵字
          • <h1>元素 - 標題

          分類

          • 私有屬性 - 當前標簽獨有的屬性
          • 標準屬性 - 幾乎所有標簽都有的屬性
          • 事件屬性 - 標準事件(了解)

          HTML標題

          • <h1> ~ <h6> - 從最大到最小
          • 并不關心標題顯示的效果 - 可以通過 CSS 完成
          • 關心標題的 語義化
          • 語義化 - 當前標簽的含義

          HTML列表

          • 有序列表

          <ol>

          <li></li>

          </ol>

          • 默認情況下 - 1,2,3,4,5...
          • 無序列表

          <ul>

          <li></li>

          </ul>

          • 默認情況下 - 黑點
          • 定義列表

          <dl>

          <dt>列表名稱</dt>

          dd>列表項</dd>

          </dl>

          • HTML鏈接

          <a href="地址"></a>

          鏈接元素<a>

          • 作用
          • 用于從當前頁面跳轉到另一個(指定)頁面
          • 實現錨點效果
          • 實現回到頂部效果
          • 實現發送郵件功能(了解)
          • href="mailto:郵件地址"
          • 路徑(地址)
          • 絕對路徑 - 查找的開始位置是固定
          • 相對路徑 - 查找的開始位置是變化
          • 在實際開發中,使用更多
          • 完整的地址
          • http:// localhost : 8080 /day02 #name
          • 網絡協議 IP地址 端口號 相對路徑 錨點
          • localhost - 等價于 127.0.0.1 - 表示本機
          • 網絡訪問 - 通過互聯網
          • 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

          • 本地訪問 - 和網絡無關

          圖片元素

          • <img> - 空標簽,沒有結束標簽
          • 必要屬性 - src屬性

          可選屬性

          • width
          • height
          • 單位
          • 像素值
          • 百分值

          HTML表格

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

          分類

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


          打算深入了解這個行業的朋友,可以私信我“前端” ,不論你是學生還是想轉行的朋友,我都歡迎,不定期分享干貨,整理的一份2019最新的web前端學習資料和0基礎入門教程分享給大家

          主站蜘蛛池模板: 国产在线精品一区二区高清不卡 | 国产色情一区二区三区在线播放| 国精品无码一区二区三区左线| 天天爽夜夜爽人人爽一区二区| 动漫精品第一区二区三区| 伊人久久大香线蕉AV一区二区| 人妻视频一区二区三区免费| 人妻av无码一区二区三区| 亚洲AV无码一区二区乱孑伦AS| 人妻天天爽夜夜爽一区二区| 国产精品毛片VA一区二区三区 | 一区视频在线播放| 免费av一区二区三区| 日本一区频道在线视频| 在线观看一区二区精品视频| 国产精品亚洲一区二区在线观看| 国产无人区一区二区三区| 国产激情一区二区三区成人91| 亚洲av不卡一区二区三区| 国产成人一区二区三中文| 国产一区二区三区在线电影| 亚洲AV无码一区二三区| 精品国产一区二区三区免费 | 91在线一区二区三区| 少妇一夜三次一区二区| 无码日韩人妻AV一区二区三区| 亚洲一区二区三区AV无码| 国产精品高清一区二区人妖| 波多野结衣AV一区二区三区中文 | 久久久久久人妻一区精品| 亚洲一区精品中文字幕| 精品国产精品久久一区免费式| 亚洲国产专区一区| 99久久精品日本一区二区免费| 福利片福利一区二区三区| 亚洲国产精品一区二区久久| 亚洲AV无码一区二区三区网址| 狠狠做深爱婷婷综合一区| 在线精品亚洲一区二区| 国产日韩一区二区三区在线观看| 亚洲精品无码一区二区|