內容簡介
Typography Stylist 是一款專為 WordPress 設計的外掛，讓使用者能夠輕鬆管理和應用專業字體的多種特性，包括替代字元和字體樣式，提升網站的排版品質與可讀性。
【主要功能】
• Glyphs Panel：顯示字體中的所有字元，便於選擇替代字元
• 段落樣式：儲存字體設定，快速應用於多個區塊
• 字體管理：上傳網頁字體套件或連接 Adobe Fonts
• 便捷搜尋：依字元、代碼或字形名稱搜尋字元
• 鍵盤操作：可用鍵盤在字元網格中移動
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
Some of your fonts’ best work is hidden.
Professional fonts often contain swashes, stylistic sets, ligatures, and alternate characters. Without a tool, you must type these characters by hand inside inline spans. This is slow, mistakes are easy, and the result can be difficult for screen readers. Typography Stylist adds controls for these features to the block editor, and it keeps the text accessible.
If you set type in professional design tools, you know what these fonts can do. Typography Stylist brings that control to WordPress. You decide how your type looks, down to a single character. Pick the alternate you want for one letter. Set a variable font to weight 435. Save the result as a paragraph style for the rest of the site, and later update the style everywhere at one time. Typography Stylist also manages your fonts: upload webfont kits, connect Adobe Fonts, or use fonts from the WordPress Font Library.
Glyphs Panel
The Glyphs Panel shows every character in a font, like the Glyphs panel in Adobe Illustrator.
Search by character, by codepoint (U+XXXX), or by glyph name.
Filter by OpenType feature (this includes the stylistic sets) or by Unicode block.
Select a letter in your text to see all of its alternates. Click an alternate to put it in place of the letter.
Click any glyph to insert it into your text.
Move through the grid with the keyboard. Screen readers announce each glyph.
The panel reads the font in your browser, and it reads only the font’s metadata. It does not extract glyph outlines, and it does not store font data on your server.
Paragraph Styles
A paragraph style is a named set of typography settings, like a paragraph style in Adobe InDesign. Save a style one time, then apply it to text in any heading, paragraph, or Typography Stylist block.
A style holds the font, weight, italic, case (All Caps, Small Caps and others), size, letter spacing, line height, OpenType features, variable font axes, and the First Letter Hang. Fit-to-width sizes can also go into a style.
“Browse styles…” shows each style in its own typeface, with your selected words as the sample text. You can search the list, and group it by font family, by size mode, or by recent use.
Each style is one CSS class. Change a style and click “Update Style”. All text that uses the style then changes.
A style can be based on another style, like “Based On” in InDesign. It uses that style’s value for every setting it does not set itself, so one change to a “Body” style also changes “Caption” and the other styles based on it.
If the selected text already has its own settings, the editor asks before the style replaces them.
“Detach Style” changes styled text back to independent settings.
In a core Paragraph or Heading block, a style can apply to the whole block. Use the Paragraph Style panel in the block sidebar, or the toolbar button with no text selected. The block’s own sidebar settings override the style, and the theme’s block styles (such as “Outline”) keep working.
Edit, rename and delete styles on the Paragraph Styles tab in Settings → Typography Stylist. Edit changes every setting of a style: font, weight, font style, size, spacing, line height, First Letter Hang, case, OpenType features and variable font axes, and the style it is based on. Every post that uses the style shows the change.
Granular typography control
Set the typography of a whole block, or of one word or one letter in it.
OpenType features: Ligatures, swashes, stylistic sets ss01–ss20, small capitals, figure styles, and more. The full list is below.
Variable fonts: The plugin reads the axes from the font file, and each axis gets a slider. You can set a weight of 435, not only 400 or 700. Custom axes also get sliders.
Size: The text can keep the size it inherits, use a responsive size (a CSS clamp() between a minimum and a maximum), or use fit-to-width.
Fit-to-width: Each line of a Typography Stylist block fills the width of the block, as on a poster or a wedding invitation. In a fitted line, you can make one glyph smaller or move it up or down, and the line still fills the width.
Spacing and style: You can set the letter spacing, line height, weight, and italic.
Your site’s front end gets CSS only. The plugin adds no JavaScript to your pages.
Two ways to style text
In a heading, paragraph, or other text block. Select the text, then click “Typography Stylist Features” (a swash “T”) in the block toolbar. Use this for whole words and phrases. Changes apply at once.
In a Typography Stylist block. Use this block for letter-by-letter work. Set the options for the whole block in the sidebar. Select text in the block to change only that text.
Two settings in Settings → Typography Stylist → Options add a Glyphs button and a Paragraph Styles button to the block toolbar. Both settings are off by default.
Accessibility
A style on part of a word puts the letters in separate elements. Some screen readers then read the word in pieces, or skip it. The Typography Stylist block prevents this. It writes two copies of your text:
A plain heading for screen readers. It is hidden from view, and it keeps the document outline correct.
A styled copy for the screen, with aria-hidden="true".
If you style part of a word in a heading or paragraph block, a notice tells you about the risk. The notice has a button that converts the block to a Typography Stylist block. Your change applies whether you convert or not. You can turn the notice off in Settings → Typography Stylist → Accessibility.
The editor panels work with the keyboard and with screen readers.
Fonts
Use fonts from these sources:
Webfont kits from MyFonts, Font Squirrel, and other providers. A ZIP with only font files also works. The plugin makes the @font-face CSS for you.
Adobe Fonts projects.
Fonts that your theme, another plugin, or a CDN already loads.
Fonts in the WordPress Font Library (WordPress 6.5+). You can also add your uploaded fonts to the Font Library, and remove them again.
By default, a font loads only on the pages that use it. This includes blog, category, and tag archives. When you delete a font, you can choose a replacement font, and content that used the deleted font shows the replacement.
Supported OpenType Features
Ligatures:
* Standard Ligatures (liga)
* Discretionary Ligatures (dlig)
* Contextual Alternates (calt)
* Contextual Ligatures (clig)
* Historical Ligatures (hlig)
Stylistic Sets:
* ss01 through ss20
Swashes & Alternates:
* Swashes (swsh)
* Contextual Swashes (cswh)
* Stylistic Alternates (salt)
* Titling (titl)
* Historical Forms (hist)
Decorative:
* Ornaments (ornm)
Numerals & Figures:
* Proportional Figures (pnum)
* Tabular Figures (tnum)
* Lining Figures (lnum)
* Oldstyle Figures (onum)
* Fractions (frac)
* Slashed Zero (zero)
Capitals & Case:
* Small Capitals (smcp)
* Capitals to Small Caps (c2sc)
* Petite Capitals (pcap)
* Case-Sensitive Forms (case)
Positional Forms:
* Initial Forms (init)
* Medial Forms (medi)
* Terminal Forms (fina)
* Isolated Forms (isol)
Superscript & Ordinals:
* Superscript (sups)
* Subscript (subs)
* Ordinals (ordn)
Other Features:
* Kerning (kern)
* Localized Forms (locl)
* Randomize (rand)
Recommended Fonts
The OpenType features work only with fonts that contain them. Many script fonts and professional typefaces do. Some examples:
Script fonts by Alejandro Paul, such as Inglesa and Gratitude Script (with the wonderful Kathy Milici)
Bookmania by Mark Simonson
Orpheus, designed by Kevin King, Patrick Griffin, and Walter Tiemann, from Canada Type
Elaina and other fonts by Laura Worthington
Liza from Underware
Memoriam by Patrick Griffin
ITC Avant Garde, designed by André Gürtler, Christian Mengelt, Ed Benguiat, Erich Gschwind, Herb Lubalin, and others, from Monotype
To see which features a font has, read its specimen or open the font in the Glyphs Panel.
Bundled Third-Party Libraries
The Glyphs Panel reads font files in the browser with two open-source libraries. They are bundled unmodified in glyphs-panel/assets/js/vendor/. They load only when you open the Glyphs Panel, and they run in the browser. No font data goes to a server.
opentype.js v1.3.4: reads TTF, OTF, and WOFF font files. MIT License. Source: https://github.com/opentypejs/opentype.js
wawoff2: decompresses WOFF2 font files (a WebAssembly build of Google’s woff2). MIT License. Source: https://github.com/fontello/wawoff2
See BUILD.txt for build and source details.
Source, Docs & Support
Source code and issue tracker: github.com/mattcowan/typography-stylist-for-wordpress.
Developer documentation: The hooks reference (HOOKS.md) is on GitHub.
Beta builds: Pre-release versions go to the GitHub Releases page before they go to WordPress.org.
Support: Use the WordPress.org support forum, or GitHub issues for bugs.
If you like the plugin, a short review helps other type lovers find it.
Technical Details
Data Storage
The plugin keeps the typography of your text in the post content, as inline styles and data attributes. It keeps fonts, paragraph styles, and settings in the WordPress options table. The plugin adds no database tables. Uploaded font files go in wp-content/uploads/typography-stylist/fonts/.
Extensibility
Developers can extend the plugin with WordPress hooks and filters. HOOKS.md on GitHub has the full reference, with examples. The REST API endpoints are at /wp-json/typost/v1/.
Source Code
The plugin contains its compiled and minified files, and also their source code. WordPress.org requires this for security and transparency.
Minified and compiled files:
Each assets/js/*.min.js file has its source file in assets/js/.
Each assets/css/*.min.css file has its source file in assets/css/.
The files in blocks/typography-stylist/build/ are compiled from the source files in blocks/typography-stylist/.
Credits
Developed by Matthew Cowan.
Special thanks to my wife for her support and inspiration, and to my dog, Sugar, for taking long walks with me between adding features.
