10个jQuery排版插件用于动态改变字体大小

jopen 10年前

在这篇文章中,我们已经收集了10个jQuery排版插件能够根据屏幕/浏览器的宽度动态变化字体大小。他们会给你更多的控制,以精确定位和为网页排版重新每个字母的大小。

1 – jQuery.fontFlex

10个排版插件用于动态改变字体大小

Demo Download

Lightweight jQuery extension for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts.

 

2 – FitText

10个排版插件用于动态改变字体大小

Demo Download

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

 

3 – FlowType.JS

10个排版插件用于动态改变字体大小

Demo Download

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and line-height based on a specific element’s width. This allows for a perfect character count per line at any screen width.

 

4 – Responsive Measure

10个排版插件用于动态改变字体大小

Demo Download

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

 

5 – slabText

10个排版插件用于动态改变字体大小

Demo Download

The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text

 

6 – jQuery TextFill

10个排版插件用于动态改变字体大小

Demo Download

This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.

 

7 – jQuery.responsiveText

10个排版插件用于动态改变字体大小

Demo Download

A simple jQuery plugin to make a specific selector’s or the whole page’s text responsive.

 

8 – Squishy

10个排版插件用于动态改变字体大小

Demo Download

Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part.

 

9 – Textsive

10个排版插件用于动态改变字体大小

Demo & Source

Plugin for creating responsive container filling text.

 

10 – TextTailor.JS

10个排版插件用于动态改变字体大小

Demo Download

Tailor-made text to fit your needs! Responsive text to fill the height of the parent element or ellipse it when it doesn’t fit.