fontfaceonload下載fontfaceonload源代碼下載

fontfaceonload

字體下載

Version 0.1.7

下載

fontfaceonload

配x配x配x該項目已存檔。直接使用CSS字體加載API！查看web-font-loading-recipes以獲取示例。

演示

用法

與任何現有的@font-face聲明一起使用。

 @font-face {
    font-family : My Custom Font Family;
    /* src and other properties as normal */
}

包括庫。致電JavaScript。

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) { } ,
    error : function ( ) { } ,
    timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ;

與內容字體一起使用

要允許在@font-face加載時可見後式字體，只需使用FontFaceOnload這樣：

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-family" ;
    }
} ) ;

然後使用班級來調整自定義字體的使用：

 body {
    font-family : sans-serif;
}
. my-custom-font-family body {
    font-family : My Custom Font Family , sans-serif;
}

另一種方法也將消除FOIT以及不需要您更改CSS的替代方法是使用loadCSS庫將@font-face加載帶有Data URI源塊動態地加載。 loadCSS小於fontfaceonload 。這種方法的局限性包括要求您管理要加載的格式（WOFF，WOFF2，TTF），並且它與Icon字體無法正常工作（因為您需要參加CSS類來樣式化其他同胞元素，例如描述性文本）。

與圖標字體一起使用

要隱藏後備字體，以使圖標字體加載時不可見奇怪的後備字符，請使用fontfaceonload和類似的glyphs選項使用：

 FontFaceOnload ( "My Custom Font Icon" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-icon" ;
    } ,
    glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;

然後使用班級來調整自定義字體的使用：

. icon {
    display : none;
}
. my-custom-font-family . icon {
    display : inline-block;
    font-family : My Custom Font Icon , sans-serif;
}

它如何工作

這使用CSS字體加載模塊（當前在Chrome 35+和Opera 22+中）。如果不可用，它將使用非常相似的方法與Typekit Web字體加載程序中使用的方法（當前為7.1kb Gzip）。

基本上，它創建一個帶有字體堆棧的元素，包括Web字體和默認的Serif/sans-serif字體。然後，它使用一個測試字符串，並在一定間隔中測量元素的尺寸。當尺寸與默認後備字體不同時，該字體被認為已成功加載。

如果您想為CSS字體加載模塊提供完整的多填充，請與Bram Stein的字體加載器一起進行。我相信，自從他推出此Polyfill以來，規格已經改變，但他正在研究更新版本。

建立項目

運行以下命令：

npm install
bower install
grunt init
正常grunt 。

配置咕unt

該項目不是一個巨大的Gruntfile.js ，而是使用模塊化grunt設置。每個單獨的grunt配置選項密鑰都有自己的文件，位於grunt/config-lib/ （readonly上游配置，不要直接修改這些文件）或grunt/config/ （項目特定的配置）。您可以在兩個目錄中使用相同的密鑰，使用lo-dash合併將對象巧妙地組合在一起。

為了在上一個Gruntfile設置中的串聯，您會向傳遞到grunt.initConfig巨型對像中添加另一個鍵： grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); 。在新的配置中，您將使用module.exports = { /* YOUR CONFIG */ };創建一個grunt/config/concat.js ; 。