我正在嘗試在WordPress 6.2.2的Twenty 23主題中使用首字下沉。
我在谷歌上搜索到的所有文件都是舊版本的WordPress,可能是舊的主題。過去這很容易,但是我找不到關于如何用Twenty 223主題做這件事的相關文檔。
接下來,我如何添加自定義CSS來為首字下沉使用不同的字體?
我有幾個WP早期版本的舊帖子,有首字下沉,我曾經通過我正在使用的兒童主題來設計它們,但是我升級到了Twenty Twenty Three主題,我失去了所有的定制。
我已經通過& quot工具& gt主題文件編輯器& quot,但是好像不管用。
p.has-drop-cap:not(:focus)::first-letter
{
font-family: 'Fredericka the Great', cursive;
}
twenty 22和twenty 23目前都不支持首字下沉。由于這種布局在某些用戶系統上看起來不太理想,所以我們同意對這兩種主題都不強制支持dropcap。閱讀更多- WordPress問題:https://github.com/WordPress/twentytwentytwo/issues/180
但是有一個解決方法。由于您必須接觸主題核心文件,使用子主題可能不是一個壞主意。否則,更新時可能會覆蓋調整。
GitHub上的@colorful-tones用戶在這個帖子中首先指出了這個解決方法。相關CSS來自另一位GitHub用戶@justintadlock,你可以在這里閱讀更多內容。
下面是啟用dropCap支持需要采取的步驟:
因為您使用的是主題文件編輯器,所以轉到那里并打開theme.json。 在大約第109行的“排版”下,將dropCap的值從false更改為true。 保存文件。 打開主題的style.css并添加:
.has-drop-cap:not(:focus)::first-letter {
font-family: var( --wp--custom--drop-cap--typography--font-family, inherit );
font-size: var( --wp--custom--drop-cap--typography--font-size, 5.5em );
font-weight: var( --wp--custom--drop-cap--typography--font-weight, 700 );
font-style: var( --wp--custom--drop-cap--typography--font-style, normal );
line-height: var( --wp--custom--drop-cap--typography--line-height, .85 );
margin: var( --wp--custom--drop-cap--spacing--margin, 0.05em 0.1em 0 0 );
padding: var( --wp--custom--drop-cap--spacing--paddig, 0 );
}
保存文件。 注意:如果你想使用自定義字體,你可能需要將你的字體添加到theme.json的排版部分。WordPress.org的一個支持主題可能會有所幫助。也可以嘗試用自己的值直接替換CSS部分中的所有變量。但是很抱歉,我不記得它是否是這樣工作的,因為我只使用過一次這種變通方法,而且是在一段時間以前,這個頁面已經不存在了。你只能自己測試了。
最后,不要忘記將你的Fredericka the Great字體包含到Wordpress中。 希望這對你有用。