[WordPress] 外掛分享: System Fonts

首頁外掛目錄 › System Fonts
40+
安裝啟用
尚無評分
444 天前
最後更新
問題解決
WordPress 4.6+ PHP 5.6+ v0.6 上架:2018-11-09

內容簡介

System Fonts 外掛會加載一個樣式表,讓您可以使用每個操作系統上的本機字型,並定義一個 system-ui CSS @ font-face,您可以在自定義器、您的佈景主題設定或您自己的程式碼中使用。

使用範例

Twenty Seventeen 佈景主題使用這個 CSS 選擇器來設定本文的字型:

body, button, input, select, textarea {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

現在我們要將它替換為預設的系統字型。
在您的 WordPress 網站中,到 外觀 > 自訂 > 額外 CSS,然後貼上這段代碼:

body, button, input, select, textarea {
font-family: system-ui;
}

除了 font-family 之外,還有其他可用的字型屬性:

font-style:normal 或 italic
font-weight:300(輕),400(常規),500(中等),700(粗體)

例如,以下代碼可讓元素的文字成為 semibold 和 cursive:

#my-element {
font-family: system-ui;
font-weight: 500;
font-style: italic;
}

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.6) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「System Fonts」→ 直接安裝(推薦)

原文外掛簡介

System Fonts enqueues a stylesheet that lets you use the native font on each operating system and defines a system-ui css @font-face that you can use on the customizer, your theme’s settings or your own code.
Usage example
The Twenty Seventeen theme uses this css selector for the body text:
body, button, input, select, textarea {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

We are going to replace it with the default system font.
In you WordPress site, go to Appearance > Customize > Additional CSS and paste this code
body, button, input, select, textarea {
font-family: system-ui;
}

Appart from them font-family, there are other font-properties available:

font-style: normal or italic;
font-weight: 300 (light), 400 (regular), 500 (medium), 700 (bold);

For example this is the code make an element’s text semibold and cursive:
#my-element {
font-family: system-ui;
font-weight: 500;
font-style: italic;
}

延伸相關外掛

文章
Filter
Mastodon