30个最好的jQuery排版插件

jopen 10年前

1. Textillate.js

Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects.

2. Fitter Happier Text

Fitter Happier Text is a javascript library for performant and fully fluid heading inspired by FitText. Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height.

3. Slab Text

slabText is a jQuery plugin for producing big, bold & responsive headlines. slabText 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 headl

4. Blast.js

Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases. Blast’s uses include typographic animation, juxtaposition,styling, search, and analysis.

5. FlowTypejs

FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered.

6. Kerning.js

Kerning.js is a small single script, with no dependencies, that allows you to scale your web typography with real CSS rules automatically. Add it to your page, add some CSS rules, and your text will be instantly beautified.

7. FitText

FitText is a simple yet very functional jQuery plugin for making sure a text fits into a defined element. It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser.

8. Font.js

Font.js adds a Font object to the collection of predefined objects available to you when doing JS coding for the web. You are probably already familiar with new Image() for loading images through the browser; this object does something similar for fonts.

9. Lettering.js

Lettering.js is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. Lettering.js solves that: it’s a jQuery plugin to give you that control. Kerning type, editorial design, manageable code, and in general complete control can all be easily done with Lettering.js.

10. Type Butter

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’ browsers just don’t provide, this is the plugin for you.

11. Bacon

Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line. It’s easier than you might think. You’ll need a block element containing text only that has its height and width set, as well as jQuery, bacon.jquery.js and bacon.jquery.css included in your site.

12. Typeface.js

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images, Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

13. Kern.js

A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography. Add the bookmarklet to your browser and activate it while at your page. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart’s content! When you’re done, copy the generated CSS and use it in your own stylesheet, right there alongside Lettering.js.

14. Arctext.js

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

15. Font to Width

Font-To-Width is a script for fitting pieces of text snugly into a defined space by utilizing different fonts available in large type families. Rather than changing the font size, it will simply select a different weight or width in the same family to fill the available space.

16. TextTailor.js

TextTailor.js is a jQuery plugin for responsive text to fill the height of the parent element or ellipse it when it doesn’t fit.

17. fontFlex

fontFlex is a lightweight jQuery plugin for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts.

18. Type Rendering Mix

Type Rendering Mix is a tiny JavaScript library that allows to apply styles only when Core Text is used (iOS and OS X) in order to achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.

19. jqISO Text

jqISo plug-in is used for creating an arching effect wherein the letters of the targeted text element will increase in size as you approach the center & after that it will slowly taper off as you move on to the last character.

20. Hatchshow

Hatchshow will automatically add a span to each line of text and scale the font size so each line ends up the same width. This is another plugin that’s useful for creating classic or vintage designs.

21. Textualizer

Textualizer is a cool jQuery plugin that allows you to transition through blurbs of text. When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position. It currently has the following effects: fadeIn, slideLeft, slideTop, and random.

22. Big Text

BigText jQuery plugin takes a single element and sizes the text inside of its child divs to fit the width of the parent element. Gives the text that lovely vertical alignment.

23. Jumble

A jQuery plugin that jumbles up the colours of your text headers, and can also animate them. Choose a colour range for the colours to be jumbled amongst, and set params for whether the shuffle is based on brightness or saturation hue.

24. Wide Text

WideText is responsive, lightweight solution for animating text for your websites and web applications.

25. Curved Text

CurvedText is a jQuery Plugin to align text on any curve. There are some different types of curved text can be created by using this plugin.

26. Fontdetect.js

This simple JS library detects whether a particular font is presently installed in the user’s computer. If the script finds the desired font, it will render the corresponding webpage. If not, it falls back to the default font you’ve specified in your website’s stylesheet.

27. Responsive Measure

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.

28. Type Butter