內容簡介
### WordPress 外掛介紹總結：
Typography Stylist 提供進階的排版控制功能。這個外掛讓您可以直接在區塊編輯器中應用 OpenType 功能，並設定字距、字體粗細等屬性。支援連字、風格集、飾帶和替代字形，讓您輕鬆創建優雅標題和高級的排版效果。無障礙功能確保您設計的文本可以被螢幕助讀器閱讀。
### 問題與回答：
1. Typography Stylist 外掛主要提供了哪些關鍵功能？
- 自訂排版風格區塊：使用專用區塊創建最大無障礙性的複雜排版。
- 內文文字選取：在 rich text 區塊中選取任意文字，快速應用基本排版功能。
- 即時預覽：在應用之前實時預覽變更。
- 強大的 OpenType 功能支持：連字、風格集、飾帶、替代字形等。
- 視覺化界面：使用者友善的快顯視窗，分類整理功能類別。
- 進階的排版控制：調整字距、字體粗細、響應式字型尺寸等。
- 區塊編輯器原生支持：與 Gutenberg 無縫整合。
- 自訂字型管理：從 MyFonts、Fontspring 等提供者上傳網頁字型套件，連接 Adobe Fonts，或定義透過主題或 CDN 載入的自訂字型。
- 字型回退：面對重新品牌並需要更改字型？刪除先前定義的字型，使用回退系統無縫取代。
- 字型預覽：在設定 > 管理員頁面中使用任何上傳的字型測試 OpenType 功能，找到您需要的樣式。
- 無障礙功能：支援螢幕助讀器的 ARIA 標記和維護適當語義的標題結構，適用於螢幕助讀器和視覺檢視。
2. Typography Stylist 外掛支援哪些 OpenType 功能？
- 連字：標準連字、自選連字、情景替代。
- 風格集：ss01 到 ss20。
- 飾帶和替代字形：飾帶、情景飾帶、風格替代、標題、裝飾。
3. Typography Stylist 外掛適合用於哪些場景？
- 婚禮邀請和活動設計
- 豪華品牌網站
- 編輯和雜誌版面
- 優雅手寫字體
- 展示排版
- 高級網絡字型
4. Typography Stylist 外掛推薦使用哪些字體？
- 需要支援 OpenType 功能的字體。許多高端手寫字體和專業字體都包含這些功能。
以上為 WordPress 外掛 Typography Stylist 的介紹及相關問答。
外掛標籤
開發者團隊
原文外掛簡介
Typography Stylist provides advanced typography controls for WordPress. This plugin allows you to apply OpenType features directly in the block editor, and access glyphs and ligatures hidden within fonts. Additionally, set properties like letter spacing, line-height, responsive sizing, font-weight, and more in the editor, so you can get exactly the look you want from your typefaces.
Manage fonts from the settings page, either by uploading webfont kits or adding Adobe Typekit embeds. Fonts load intelligently only when they are used. With support for ligatures, stylistic sets, swashes, and alternates, you can create elegant headlines and premium typography effects with ease.
Accessibility features ensure that your styled text remains readable by screen readers and assistive technologies: breaking up strings of text with the inline span elements necessary to apply complex features can cause screen readers to read words in fragments or skip them entirely. The plugin includes a custom Typography Stylist block that provides a clean, unbroken set of text to maintain screen reader compatibility while allowing for complex typography to be presented visually. When applying features to partial words in standard heading blocks, the plugin detects potential accessibility issues and provides a warning with options to convert to the Typography Stylist block for maximum accessibility, or to apply the features anyway. When the block cannot be converted (e.g., inside a locked pattern), the conversion option is hidden and the warning adjusts accordingly. The warning can be disabled entirely in Settings → Typography Stylist → Accessibility.
Key Features
Custom Typography Stylist Block: Create complex typography with maximum accessibility using the dedicated block. Screen readers can “stumble” over complex inline formatting required to display specific ligatures and alternates. This block preserves the document outline while providing styled text for visual users.
Inline Text Selection: Highlight any text within richtext blocks like headings, and apply basic typography features quickly. A warning will pop up if your selection breaks words and causes accessibility issues, with options to convert to the Custom Typography Stylist Block for maximum accessibility or apply anyway. The warning can be disabled in Settings → Accessibility.
Live Preview: Preview changes in real-time before applying.
Rich Feature Support: Ligatures (liga, dlig, calt), Stylistic Sets (ss01-ss20), Swashes, Alternates, and more.
Visual Interface: User-friendly, resizable, moveable popover with organized feature categories.
Advanced Typography Controls: Adjust letter spacing, font weight, responsive font sizes, and more.
Block Editor Native: Seamlessly integrates with Gutenberg.
Custom Fonts Management: Upload webfont kits from MyFonts, Font Squirrel, or other providers, connect Adobe Fonts, or define custom fonts loaded through themes or CDNs. Fonts are loaded intelligently only on the pages you need them for optimum performance.
Font Fallbacks: Facing a rebranding and needing to change fonts? No worries. Delete a font previously defined, and use the fallback system to seamlessly replace them.
Font Preview: Test OpenType features with any uploaded font in the settings > admin page to find exactly the styles you need.
Accessibility Features: Screen reader support with ARIA markup and a heading structure that maintains proper semantics for both screen reader and visual views
ARIA Label Support: Optional aria-label attributes for screen reader compatibility for rich text blocks with inline formatting
Automatic Archive Detection: Custom fonts load automatically on blog archives, category pages, and tag pages without requiring manual configuration
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)
Perfect For
Wedding invitations and event designs
Luxury brand websites
Editorial and magazine layouts
Elegant script fonts
Display typography
Premium web fonts
Recommended Fonts
This plugin requires fonts that support OpenType features. Many premium script fonts and professional typefaces include these features.
Examples:
* Script fonts by Alejandro Paul like Inglesa, 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
* Many other typefaces
Check the font’s documentation or specimen to verify which OpenType features are supported. Not all fonts have alternates or other advanced features.
How It Works For Headings
Create or edit a heading block (H1-H6)
Type your headline text
Select the text you want to style
Click the “Typography Features” button in the toolbar (a swashy “T” icon)
Select individual features
See the live preview at the bottom of the popover
If using partial word selections, you’ll see an accessibility warning with options to convert to the Typography Stylist Block for maximum accessibility, or apply the features anyway. If the block cannot be converted (e.g., inside a locked pattern), only the “Apply Anyway” option is shown. This warning can be disabled in Settings → Typography Stylist → Accessibility.
Click Apply
How It Works For Custom Blocks
Create or edit a Typography Stylist block
Type your text
Apply any global block settings in the sidebar
Select any text you want to style
Click the “Typography Features” button in the toolbar (a swashy “T” icon)
Select individual features and see the live preview
Technical Details
Browser Support
Chrome/Edge: Full support
Firefox: Full support
Safari: Full support
Internet Explorer 10+: Partial support
Performance
Features are applied using CSS font-feature-settings, which is hardware-accelerated in modern browsers. The plugin includes JavaScript in the block editor but uses only CSS for frontend rendering.
Data Storage
Typography features are stored as inline styles and data attributes within post content. No additional database tables are created.
Extensibility
Developers can extend the plugin using WordPress hooks and filters. REST API endpoints are available at /wp-json/typography-stylist/v1/.
Font Management
The plugin provides three ways to add custom fonts:
Upload Webfont Kits:
Upload complete webfont kits (ZIP files) from MyFonts, Fontspring, or other providers. The plugin extracts fonts, processes CSS, and stores files securely in your WordPress uploads directory.
Adobe Fonts Integration:
Connect Adobe Fonts (Typekit) projects by pasting the embed code. Fonts load directly from Adobe’s servers.
Custom Font Definitions:
Define fonts that are already loaded through your theme, plugins, or CDN (like Google Fonts). Simply provide the font family name and optional fallbacks. No files are uploaded to WordPress—fonts continue loading from their original source.
All three methods make fonts available in the block editor and preview selector.
Source Code
This plugin includes both compiled/minified files and their source code to meet WordPress security and transparency requirements.
Minified/Compiled Files:
* assets/js/.min.js files have corresponding source files in assets/js/
* assets/css/.min.css files have corresponding source files in assets/css/
* blocks/typography-stylist/build/ files are compiled from blocks/typography-stylist/ source files
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.
