前端字體使用

時間 2020-01-03

標籤前端字體使用简体版

原文原文鏈接

1. 常見字體格式

1.1 TrueType (.ttf)

由蘋果和微軟共同開發的一種計算機輪廓字體（曲線描邊字）類型標準。css

1.2 OpenType (.otf)

一種可縮放字體計算機字體類型，採用PostScript格式，微軟與Adobe聯合開發，用來替代TrueType字體的新字體。html

1.3 Embedded Open Type (.eot)

嵌入式OpenType字體是被微軟設計用來在網頁使用的字體格式。該字體格式是OpenType字體的壓縮格式。簡單地把字體嵌入到網頁中可能會致使受版權保護的字體在網絡上肆意複製。因此嵌入式OpenType包括了一些特性來阻止複製行爲。前端

1.4 Web Open Font Format (.woff)

Web開放字體格式是一種網頁所採用的字體格式標準。由萬維網聯盟的Web字體工做小組標準化。此字體格式不但可以有效利用壓縮來減小文件大小，且不包含加密也不受DRM（數字著做權管理）限制。css3

1.5 Scalable Vector Graphics Fonts (.svg)

SVG字體當前只在Safari和Android瀏覽器中受支持。IE尚未考慮實現它，Chrome 38（和Opera25）移除了這個功能，Firefox已經無限期推遲實施它以專心實現WOFF。.svgz是壓縮版的.svg。web

2. 前端字體使用場景

2.1 靜態文字（即不經過JS動態改變）

文字較少的狀況可使用圖片的方式
文字較多的狀況可使用字蜘

2.2 動態文字

在線字體庫瀏覽器
- 有字庫

引用字體文件
在 CSS3 @font-face 規則中定義，而後方可以使用。網絡

@font-face {
        font-family: <family-name>;                             //必選。自定義名稱，如：syst、'syst bold'、"思源宋體"，含中文、空格、下劃線等時加上單引號或雙引號
        src: <src>;                                             //必選。字體文件的 URL
        unicode-range: <unicode-range>;                         //可選。關於該屬性使用參考文末相關閱讀
        font-variant: <font-variant>;                           //可選。未研究
        font-feature-settings: <font-feature-settings>;         //可選。未研究
        font-variation-settings: <font-variation-settings>;     //可選。未研究
        font-stretch: <font-stretch>;                           //可選。定義如何拉伸字體
        font-weight: <font-weight>;                             //可選。根據粗細引入不一樣字體文件，若是隻須要normal則能夠不用寫，引用的字體文件在使用時若須要加粗，而沒有在@規則中定義，是無效的
        font-style: <font-style>;                               //可選。可是在使用時能夠定義斜體，而不須要引入斜體字體
    }
    
    eg.
    @font-face {
        font-family: 'source_han_serif_cnbold';
        src: url('bold-webfont.woff2') format('woff2'), url('bold-webfont.woff') format('woff');    //能夠指定多個路徑，關乎兼容性下文提到，format指定文件格式，對瀏覽器較友好
        font-weight: normal;
        font-style: normal;
    }
    
    .font {
        font-family: "source_han_serif_cnbold";
        font-size: 30px;
    }

3. 瀏覽器兼容性

若是你的項目無需兼容IE8瀏覽器，woff和woff2兩個字體足夠；
IE8及如下僅支持.eot格式；
IE9以前的版本沒有按照標準解析字體聲明，當src屬性包含多個url時，它沒法正確的解析而返回404錯誤，而其餘瀏覽器會自動採用本身適用的url|文末評論

3.1 在線字體格式轉換

FONTsquirrel：轉換生成.woff和.woff2文件，經測試中文字體會被過濾，只須要英文和數字的能夠在此轉換。
字客網：支持轉換各類格式，支持中文。

參考文獻

維基百科