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 ; 。