好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

FitText.js

FitText.js 介绍

FitText.js是一款经典的jQuery响应式 标题 文字 插件 。FitText.js可以将 标题 文字 自适应容器的大小,缩放容器时 标题 字体大小随之改变。FitText.js可用于桌面设备、手提电脑、平板电脑和手机等众多设备,非常强大。?

如何使用

首先要在 页面 的头部引入jQuery和jquery.fittext.js 文件 。

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>

<script src="jquery.fittext.js"></script>

然后就可以 调用 插件 使你需要的 标题 文字 变为响应式文本。

<script>

jQuery("#responsive_headline").fitText();

</script>

经过上面的 调用 , 标题 文字 变为响应式的, 默 认的字体大小是容器宽度的1/10。

压缩系数

如果你的 标题 文字 在 调用 插件 后不够大,你可以调整压缩系数来调整字体的大小。该系数 默 认值为1,系数越大字体越小。

jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively)

jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively)

最小字体大小和最大字体大小

FitText 允许你使用像素为单位为 文字 设置 minFontSize 和 maxFontSize。

jQuery("#responsive_headline").fitText(1.2,{ minFontSize: '20px',maxFontSize: '40px' });

关于css样式

要确保你的容器有 一个 宽度!

dis play: inline的元素不要有宽度。 dis play: block或 dis play: inline-block的元素需要 一个 宽度。(例如:width: 100%)

position:absolute的元素需要 一个 宽度。

可以不断调整css样式直至你满意为止。

可以为 标题 文字 大小设置 一个 No-js回退的css 代码 。

网站地址 : http://fittextjs.com

GitHub: https://github.com/davatron5000/FitText.js

网站描述: 一款使 文字 填充式自适应的Jquery 插件

FitText.js官方网站

官方网站: http://fittextjs.com

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于FitText.js的详细内容...

  阅读:39次

上一篇

下一篇

第1节:jquery-labelauty    第2节:jQuery.fontFlex    第3节:jQuery.Marquee    第4节:Nestable    第5节:magnificent.js    第6节:vegas    第7节:gridster.js    第8节:jQuery-Knob    第9节:Parallax.js    第10节:fakeLoader.js    第11节:query-mousewheel    第12节:jquery.danmu.js    第13节:jquery.toast.js    第14节:jquery.fileDownload    第15节:enlarge.js    第16节:OrgChart    第17节:Uploadify    第18节:cPager.js    第19节:timeline.js    第20节:magnify.js    第21节:jTable    第22节:jquery.barrager.js    第23节:lightbox2    第24节:toastr.js    第25节:jQuery-Validation-Engine    第26节:lazyload.js    第27节:Fluidbox.js    第28节:jQuery.toTop    第29节:eadremaining.js    第30节:SelectPage.js    第31节:fullPage.js    第32节:jquery-migrate    第33节:jBox    第34节:hc-sticky    第35节:selectize.js    第36节:paroller.js    第37节:vide    第38节:skippr    第39节:jQuery-Autocomplete    第40节:imagesloaded    第41节:Stellar.js    第42节:Mapael    第43节:lazy-line-painter    第44节:jquery-confirm    第45节:imgLiquid    第46节:ResponsiveSlides.js    第47节:mgGlitch.js    第48节:jquery-validation    第49节:Wookmark-jQuery    第50节:FitVids.js    第51节:vex    第52节:Garlic.js    第53节:artDialog    第54节:isotope    第55节:jquery.mosaicflow    第56节:Viewer.js    第57节:At.js    第58节:animsition    第59节:jquery.mask.js    第60节:lightslider    第61节:Lettering.js    第62节:ssi-uploader    第63节:jquery.fileapi    第64节:sly.js    第65节:Galpop    第66节:OwlCarousel2    第67节:jQueryRotate.js    第68节:metismenu    第69节:jPlayer    第70节:fancyInput    第71节:FooTable    第72节:jquery-textext    第73节:jquery-mockjax    第74节:jQuery.mmenu    第75节:paper-collapse    第76节:jqPaginator.js    第77节:Trumbowyg    第78节:bxslider    第79节:jquery.transit    第80节:busy-load    第81节:jquery.color.js    第82节:jcSlider.js    第83节:onepage-scroll    第84节:ScrollMagic    第85节:jquery.zoom.js    第86节:jcarousel    第87节:icheck    第88节:datetimepicker    第89节:turn.js    第90节:OverlayScrollbars    第91节:jQuery-contextMenu    第92节:slick-lightbox.js    第93节:Filterizr    第94节:jquery-backstretch    第95节:Waterwheel-Carousel    第96节:Snabbt.js    第97节:images-grid.js    第98节:share-button    第99节:jquery.imageuploader.js    第100节:gridstack.js    第101节:multi-select.js    第102节:midnight.js    第103节:waterfall    第104节:jQuery.NumPad    第105节:Magnific-Popup    第106节:threesixty-slider    第107节:Swipebox    第108节:textillate.js    第109节:star-rating-svg    第110节:jquery-textcomplete    第111节:jmpress.js    第112节:jquery-touchswipe    第113节:jScrollPane    第114节:overhang.js    第115节:distpicker    第116节:pagePiling.js    第117节:FlexSlider    第118节:AOS.js    第119节:threesixty.js    第120节:alertify.js    第121节:s-gallery    第122节:chosen.js    第123节:formvalidation    第124节:Parsley.js    第125节:jQuery-File-Upload    第126节:colorbox    第127节:particleground    第128节:Datedropper.js    第129节:fancyBox    第130节:cxSelect    第131节:jquery.scrollTo    第132节:Waterfall.js    第133节:jquery-dropdown    第134节:jstree    第135节:daterangepicker    第136节:FitText.js    第137节:Remodal    第138节:slider.js    第139节:sidr    第140节:peity.js    第141节:jquery-steps    第142节:jquery.typeahead.js    第143节:CardTabs    第144节:DataTables    第145节:jquery.timelinr.js    第146节:jquery.gray.js    第147节:jquery.timeago.js    第148节:jquery.panzoom    第149节:Raty    第150节:jquery.pep.js    第151节:Treeview    第152节:SelectMenu.js    第153节:Inputmask    第154节:jquery.ez-plus.js    第155节:zTree    第156节:timer.jquery    第157节:Jcrop    第158节:MagicSuggest    第159节:jGravity    第160节:jquery.sticky-sidebar.js    第161节:cxCalendar    第162节:Paginathing.js    第163节:fullcalendar    第164节:roundabout    第165节:Toolbar.js    第166节:evol-colorpicker    第167节:adaptive-backgrounds.js    第168节:jQuery之家    第169节:scrollorama    第170节:Scrollify    第171节:Progression.js    第172节:Slick.js    第173节:unveil    第174节:unlock.js    第175节:nanoScroller.js    第176节:messenger    第177节:Smoothslides    第178节:Tabslet    第179节:jquery-plugin-circliful    第180节:pickadate.js    第181节:tooltipster    第182节:jQuery-menu-aim    第183节:perfect-scrollbar    第184节:multiscroll.js    第185节:grumble.js    第186节:clndr.js    第187节:iziModal    第188节:noty    第189节:Notify.js    第190节:Zoomove    第191节:chardin.js