HTML基礎 字型引入 點滴積累大進步系列

2021-08-21 12:43:30 字數 1491 閱讀 4461

2、字型轉換器推薦

3、例項展示

4、遇見錯誤解析

而由於網頁中使用的字型型別,也是各瀏覽器對字型型別有不同的支援規格。 字型格式型別主要有幾個大分類:truetype、embedded open type 、opentype、woff 、svg。 參考位址

windows和mac系統最常用的字型格式,其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字型,這使得它們比基於向量的字型更容易處理,保證了螢幕與列印輸出的一致性。同時,這類字型和向量字型一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。

opentype是微軟和adobe共同開發的字型,微軟的ie瀏覽器全部採用這種字型。致力於替代truetype字型。

woff – web open font format (.woff)

woff(web開發字型格式)是一種專門為了web而設計的字型格式標準,實際上是對於truetype/opentype等字型格式的封裝,每個字型檔案中含有字型以及針對字型的元資料(metadata),字型檔案被壓縮,以便於網路傳輸。

svg是由w3c制定的開放標準的圖形格式。svg字型就是使用svg技術來呈現字型,還有一種gzip壓縮格式的svg字型。

字型格式轉換器

目錄位置

特殊字型引入title>

* body

article

@font-face

style>

head>

id="showfont">

#showfont

h1

style>

style="font-family: lll">各種字型大薈萃hellosapn>

style="font-family: dingding">各種字型大薈萃hellosapn>

style="font-family: shiguang">各種字型大薈萃hellosapn>

style="font-family: jian">各種字型大薈萃hellosapn>

style="font-family: hanyi">各種字型大薈萃hellosapn>

article>

section>

body>

html>

之前遇到很多次字型檔案引入後失效的問題,後來發現不是引入錯誤,是文字包格式不識別,推薦自定義文字時選用.ttf格式字型包,字型出不來的話嘗試換個字型包吧,(☄⊙ω⊙)☄

專案中引入字型

font face html,body蘋方提供了六個字重,font family 定義如下 蘋方 簡 常規體 font family pingfangsc regular,sans serif 蘋方 簡 極細體 font family pingfangsc ultralight,sans serif...

UNIAPP 怎麼引入字型

第一種 網路字型位址 const url loadfontweb 第二種 本地字型位址 第一步 在字型檔案存放在static目錄下面 第二步 本地路徑需要使用絕對路徑,所以需要native的方法來 loadfontlocal success fail e 第三部 在css中對需要引用的字型 使用 f...

css引入外部字型

font face body 不同瀏覽器字型的格式有差別 字型字尾和瀏覽器有關,如下所示 ttf或.otf,適用於firefox 3.5 safari opera eot,適用於internet explorer 4.0 svg,適用於chrome iphone 比如 font face css3 ...