fontfaceonload
Version 0.1.7
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 , как SO:
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 с помощью блока источника URI URI. loadCSS меньше, чем fontfaceonload . Ограничения к этому подходу включают в себя необходимость управления тем, какой формат загружать (WOFF, WOFF2, TTF), и он не будет работать так же, как с шрифтами иконами (поскольку вам необходимо участвовать в классе CSS, чтобы стилизовать другие элементы брата, такие как описательный текст).
Чтобы скрыть запасной шрифт так, чтобы странные запасные символы не были видны, пока шрифт значка загружается, используйте FontfaceOnload с опцией glyphs , например, SO:
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 (который в настоящее время составляет 7,1 КБ GZIP).
По сути, он создает элемент со стеком шрифта, включая веб-шрифт и шрифт по умолчанию/шрифт Sans-Serif. Затем он использует испытательную строку и измеряет измерения элемента с определенным интервалом. Когда размеры отличаются от шрифтов по умолчанию, шрифт считается успешно загруженным.
Если вы хотите полный полифилл для модуля загрузки шрифта CSS, следуйте погрузчику с шрифтом Брэма Стейна. Я считаю, что спецификация изменилась с тех пор, как он запустил этот многофил, но он работает над обновленной версией.
Запустите эти команды:
npm installbower installgrunt initgrunt как обычно. Вместо одного гигантского Gruntfile.js , этот проект использует модульную настройку Grunt. Каждая отдельная клавиша опции конфигурации Grunt имеет свой собственный файл, расположенный в конфигурации grunt/config-lib/ (Readonly Upstream, не изменяйте их напрямую) или grunt/config/ (Special Configs). Вы можете использовать один и тот же ключ в обоих каталогах, объекты разумно объединяются с помощью Lo-Dash Merge.
Для объединения в предыдущей настройке Gruntfile вы добавите еще один ключ к гигантскому объекту grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); переданному в grunt.initConfig Полем В новой конфигурации вы создадите grunt/config/concat.js с помощью module.exports = { /* YOUR CONFIG */ }; Полем
MIT Лицензия
