內容簡介
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;
}
外掛標籤
開發者團隊
原文外掛簡介
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;
}
