怎樣讓瀏覽器載入系統不自帶的字型

2021-07-04 09:19:19 字數 1020 閱讀 8053

有時候我們需要瀏覽器載入一些自行設計的字型,這些字型在電腦的系統中是不存在的,而且是不被瀏覽器所支援的,如果我們需要使用這種字型就需要我們將字型做成各個瀏覽器都能支援的格式,一般來說我們需要設定四種格式。

這個主要應用到css3的@font-face,ie4就開始支援@font-face屬性。

一、turetpe(.ttf)格式:

.ttf字型是windows和mac的最常見的字型,是一種raw格式,因此他不為**優化,支援這種字型的瀏覽器有【ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios mobile safari4.2+】;

二、opentype(.otf)格式:

.otf字型被認為是一種原始的字型格式,其內建在turetype的基礎上,所以也提供了更多的功能,支援這種字型的瀏覽器有【firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios mobile safari4.2+】;

三、web open font format(.woff)格式:

.woff字型是web字型中最佳格式,他是乙個開放的truetype/opentype的壓縮版本,同時也支援元資料報的分離,支援這種字型的瀏覽器有【ie9+,firefox3.5+,chrome6+,safari3.6+,opera11.1+】;

四、embedded open type(.eot)格式:

.eot字型是ie專用字型,可以從truetype建立此格式字型,支援這種字型的瀏覽器有【ie4+】;

五、svg(.svg)格式:

.svg字型是基於svg字型渲染的一種格式,支援這種字型的瀏覽器有【chrome4+,safari3.1+,opera10.0+,ios mobile safari3.2+】。

得到了這些字型之後,我們需要在樣式表中進行宣告

字型宣告如下:

@font-face  

瀏覽器HTML自帶懶載入技術

對於目前的懶載入,我們一般採用的是通過第三方庫或懶載入庫來實現,但是該方式的顯著問題就是,必須按順序執行 1 載入初始的 html 響應內容 2 載入懶載入庫 3 載入 假如瀏覽器能直接支援懶載入,那是最好的,這一想法也不是不可能哦!從chrome 75開始,我們可以通過切換兩個開關來手動啟用懶載入...

360急速瀏覽器不自動公升級的方法

最開始的時候 chrome列印 有乙個簡化網頁的功能 能夠僅列印核心資料出來 比較好用 但是隨著自動公升級 發現這個功能沒有了 簡單查了下 發現chrome 52又想到了360急速瀏覽器的chrome的版本 也支援 就是用使用了較低版本的 360急速瀏覽器.先試試.360極速瀏覽器總是自動更新,有時...

怎樣判斷瀏覽器的型別

現在網路上的瀏覽器,作業系統就象中國的方言一樣,那個叫多啊 這給我們這些開發人員 帶來了巨大的痛苦 雖然可能大家的喜好不同 用的系統也不同 有人喜歡用ie,有人喜歡用 那麼的幾種 ie核心,netscape核心 怎麼樣用js來判斷各種瀏覽器的型別呢 在不同的瀏覽器中對js的支援程度,語法要求都不大一...