[WordPress] 外掛分享： System Fonts

前言介紹

  • 這款 WordPress 外掛「System Fonts」是 2018-11-09 上架。
  • 目前有 30 個安裝啟用數。
  • 上一次更新是 2024-12-30，距離現在已有 125 天。
  • 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

nilovelez |

外掛標籤

front end | typography |

內容簡介

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;
}

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「System Fonts」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • Prevent Landscape Rotation 》這是一個輕量級的 WordPress 外掛程式，可以防止手機裝置發生橫向旋轉的情況，並顯示訊息！, 此外掛程式僅使用標準動作、過濾器以及 SweetAlert Js。, 如果您...。
  • Gravity Forms: Post Updates 》需要 PHP 5.3 或更高版本, 允許您在前端使用 Gravity Forms 更新任何文章。如果使用 "Gravity Forms + Custom Post Type" 外掛，甚至可以更新自定義文章類型...。
  • DJD Site Post 》此外掛可在網站中添加（響應式）表單以撰寫文章，而不需要進入管理區。它允許使用「匿名」或「訪客」發布（未登錄用戶）。這使得 DJD Site Post 成為用戶生成...。
  • Display Custom Fields – wpView 》這個外掛允許在文章/頁面和其他內容類型中顯示自定義欄位，將自定義欄位作為文章/頁面內容中的短碼來放置。以不同的美麗外觀展示自定義欄位的最簡單方法。wpV...。
  • LH Password Changer 》LH Password changer 創建了一個文章或頁面的短碼: [lh_password_changer_form]。這個短碼和相關處理程序，允許已登錄的使用者在前端更改密碼。。
  • Live Landing Page Composer – visual landing page builder for digital marketers 》在幾分鐘內打造令人驚豔的頁面, 使用我們的頁面建構器可以輕鬆打造具有高移動響應性的美觀頁面。Live Composer 是一個前端WordPress 頁面建構器外掛，您可以...。
  • Easy Accordion Posts 》易於使用的手風琴文章外掛程式 (EAP), 使用簡單且直觀的選項，將您的文章顯示為手風琴 (以網格形式顯示)。即使是基本的輸出 (參見下面的範例)，也不需要編程...。
  • UIKIT WP Integrator 》一般資訊, UIKIT WP Integrator 是一個外掛，可整合 UIKIT 前端框架來自 YOOTHEME。, 此外掛會在 WordPress 後台中設定下的選單項目 "UIKIT Integrator" 中加...。
  • Courier Notices 》在您的網站上添加可取消和不可取消的通知。, , 自定義 Courier Notices 使用的顏色和圖標，無需編碼, 在需要時添加新的“類型”通知, 附帶一個常用的有用通知庫...。
  • Front-end Toolbar 》此外掛可以將 WordPress 管理員側邊欄中的選單新增至前端 WordPress 工具列中的 {site-name} 選單下。歡迎提供寶貴的回饋。。
  • Login Non-Admin Redirection 》預設情況下，如果沒有設置「redirect_to」參數，WordPress 會將用戶重新導向到管理後端。該外掛程式將預設的重新導向 URL 替換為前端網站 URL。使用「redirec...。
  • Front Desk 》Front Desk 是 WordPress 的一個外掛程式，它新增了登入、註冊、密碼恢復及重設，以及個人資料編輯等功能於 WordPress 網站前端。, 此外，該程式也提供了選單...。
  • BP Site Post 》此外掛提供了一個BuddyPress社群網站的前端發文解決方案，不僅僅是啟用前端編輯器這麼簡單。還有其他考慮因素，例如如有必要，移除對 WordPress 後端的訪問權...。
  • Admin Menu in Frontend 》Admin Menu in Frontend 外掛會在您的個人檔案中新增一個選項「當瀏覽網站時顯示管理選單」。您可以啟用此選項，並在公開頁面上看到管理選單。, 此外，您可以...。
  • Frontend Developer 》Frontend Developer 提供一種簡單的方法，讓主題開發人員確切地查看他們當前所使用的視口解析度。, 從 2.0 版本開始，Frontend Developer 現在已連接到管理工...。

文章
Filter
Apply Filters
Close
Mastodon