
內容簡介
Demo – 文件 – GitHub
使用 Google Fonts 將排版應用到您的 Gutenberg 站點中。輸入 CSS 選擇器或選擇區塊以應用自定義排版。
排版風格
可用的排版選項包括:
從 Google Fonts 中選擇的字體系列與變體
顏色 (十六進位或 rgba)
文字大小
行高
字體粗細
字形 (斜體、正常、偏斜)
字元間距
文字轉換 (首字母大寫、全大寫、全小寫)
文字裝飾 (穿過線、上線、下線)
排版內容
可將排版分配給特定內容:
所有網站
文章類型/個數 (網站上可用的文章類型)
文章類型/個數的範本 (索引、單一)
首頁
404 頁面
排版選擇器
每個排版可以擁有幾組不同的選擇器,並且基於根排版進行獨特的修改。
例如:可以設置一個排版,具有特定的字體、顏色和字體大小;
它的每個選擇器組都繼承了這些屬性,可以修改所繼承的色彩,也可以修改所繼承的字體大小。
可用的 CSS 選擇器包括:
文字 CSS 選擇器 (例如:.site-title a)
區塊選擇器 (例如:引用區塊 > 引用語)
使用方式
可以從自訂器中的「排版」選項卡中存取此外掛程式。
它也可以從任何區塊編輯器的「排版」側邊欄 (編輯器右上角) 存取。
建立一種排版並指定一些選項;建立一組選擇器,其中包含一些 CSS 或區塊選擇器。
以上就是全部步驟!
如果您想預覽不同的字體,可以在 Google Fonts 存儲庫中預覽它們。
注意:排版編輯被指定為「edit_theme_options」能力。這意味著,默認情況下,只有管理員和超級管理員可以使用這些功能。
外掛標籤
開發者團隊
原文外掛簡介
Demo – Documentation – GitHub
Add Typography to your Gutenberg site using Google Fonts. Enter CSS selectors or select Blocks to apply custom typography.
Typography style
Available typography options include:
Font family & variants from Google Fonts
Color (hex or rgba)
Font size
Line height
Font weight
Font style (italic, normal, oblique)
Letter spacing
Text transform (capitalize, uppercase, lowercase)
Text decoration (line-through, overline, underline)
Typography context
Typographies can be assigned to a specific context:
All site
Post types/s (post types available on the site)
Post types/s template (index, single)
Front page
404 page
Typography selectors
Each typography can have several groups of selectors with unique modifications based on the root typography.
For example: a typography can be set with a certain Font, Color and Font size;
each of its groups of selectors inherit those properties and one could modify the inherited color and other the inherited Font size.
Available CSS selectors include:
Text CSS selector (eg: .site-title a)
Block Selector (eg: Block Quote > Citation)
Usage
The plugin can be accesed from the Customizer inside the tab The Typography.
It can also be accesed from any Block editor’s The Typography sidebar (top right corner of the editor).
Create a typography and assign it some options; create a group of selectors and inside it create some CSS or Block selectors.
That’s it!
If you want to preview the different fonts before selecting one you can preview them in the Google Fonts repository.
Note: The typography editing is assigned to the ‘edit_theme_options’ capability. This means that, by default, only admin and super admin will be able to use the features.
