1. 程式人生 > >怎樣讓瀏覽器載入系統不自帶的字型

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

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

這個主要應用到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+】。

一般我們都能找到.ttf格式,但是其他三種格式就要我們費一點腦筋了。我們需要通過這種檔案格式轉換為其餘兩種檔案格式。字型檔案格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的線上字型轉換服務獲取

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

字型宣告如下:
@font-face {  font-family: 'fontNameRegular';  src: url('fontName.eot');  src: local('fontName Regular'),                local('fontName'),                url('fontName.woff') format('woff'),                url('fontName.ttf') format('truetype'),                url('fontName.svg#fontName') format('svg');