Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons 是一套由 Google Fonts 所推出的圖示字型,將超過 3,216 個字形整合到一個字體檔案中,並具有多種設計變體。每種圖示都提供 Outlined、Rounded 及 Sharp 三種樣式以及 Fill、Weight、Grade 及 Optical Size 四種可調節的可變字體樣式,並讓使用者自行選擇要以字型或是 SVG、PNG 圖檔格式下載。使用者可以在線上自行操作設定圖示並複製所提供的 CSS 及 HTML Code,輕鬆將其應用到自己的 Wwb、Android 或是 iOS 專案中。此外,該圖示套件還支援 Figma Plugin,在 Figma 中輕鬆使用。Material Symbols & Icons 採 Apache license 授權,這表示不論是個人還是商業使用均可。

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons 是一套開放原始碼圖示字型集,其 7.1.0 版本包含了 1,300 個專為 Web、iOS、Android 和桌面應用程式製作的圖示。這個字型集專為 Ionic Framewor k設計,實現了應用程式中 Material Design 和 iOS 風格的統一使用。每個 Ionicons 圖示都提供 Outline、Filled 和 Sharp 三種不同風格的選擇,同時支援 Ionicons Web Component 用法。這種用法能夠動態載入 SVG,有效減少應用程式載入時的資源開銷,提高圖示顯示效率。Ionicons 採用 MIT 許可證,允許商業使用,為應用程式圖示的顯示提供更大的靈活性和效率!

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

在網頁中如果要用圖示,例如電話、郵件或是箭頭,以往的做法就是要有該圖示的圖片檔,將其放在指定的位置,但隨著螢幕大小多元化,固定尺寸的圖示圖片檔,缺點盡顯,除了佔用流量外,亦無法滿足螢幕大小的變化,因此將圖示如同網頁字形般的運用,是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集,CSS.GG 這個網站同樣提供免費的字形化圖示集,使用者可以自訂顏色、尺寸,再透過其所提供的 HTML,CSS、SVG 或是 TSX 語法就能應用到網頁上。

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

使用文書編輯軟體時,如果碰到要使用圖示來代替文字,例如一個電話或是一個小鈴鐺的圖示,通常的做法就是去找個圖檔來使用,然後調整其大小及其位置,相當麻煩,但如果該圖示可以像打字般的打上一個字的使用方式,相信會更簡單些。Font Awesome 是個以字型的方式來運用圖示的圖示字型,其圖示的類型更是包羅萬象,以往我們都會將其運用在網頁上,而如今也推出 Windows、Mac 可以安裝的 OpenType 圖示字形檔,透過安裝,我們可以將其運用在 Word、PowerPoint、記事本或是 Photoshop 之類的圖形編輯軟體上,讓圖示的顯示就像打字般的簡單。

IcoFont 提供超過 2100個圖示字型免費使用

IcoFont 提供超過 2100個圖示字型免費使用

圖示的表達會比文字描述更乾淨俐落,就像 line 會將一些輸入的詞語轉成圖示來表示一樣,而在網頁中如果要使用圖示表達像是鈴鐺、電子郵件或是分享按鈕,傳統的做法可以使用圖片,也可以使用 SVG 向量圖檔,然而最簡便的方式還是使用圖示字型。
GoogleFont Awesome 均有提供可免費運用到網頁內的圖示字型,而 IcoFont 也是如此的應用,其提供超過 2100個圖示,透過 CSS 的引用,使用者就可以使用 Markup、Hex 或是 HTML Entity 語法來成呈現圖示,另外,每個圖示亦提供 SVG 向量圖型下載,讓應用更為全面。

ICON8 Line Awesome 提供 1380+個精美圖示字型 免費使用

ICON8 Line Awesome 提供 1380+個精美圖示字型 免費使用

圖示字型有方便快速使用的優點,但也因為是字形所以有色彩表現單一的缺點,要使用圖示字型,我們有 Google Icon FontTaiwan Icon FontIcon Font 或是 Font Awesome 可以選擇,而 Line Awesome 這個圖示字型則是由 ICON8 提供,約有 1380 個可應用,其將圖示以 Accessibility、Alert、Animals、Arrows、Audio & Video、Automotive、Brand Icons...等分類顯示,方便使用者查找,而網頁常用的 LINE、Telegram、Facebook...等分享圖示也均有提供,如果在其他圖示字型提供者找不到的圖示,都可以來這裡試試。

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

在聊天室或是社群網站發文、留言所看的表情符號或特殊圖示都是彩色的,如果想在網頁中改變這類型符號或圖示的顏色或大小,我們可以來使用 Google Fonts 針對這類表情符號與特殊字型所推出的 Noto Emoji 雲端字型,透過其系統化的整理,使用者可以將這類表情符號、特殊圖示改以清爽的線條方式來呈現,並可以利用字重的設定方式來改變圖示或字型輪廓線條粗細,如果再搭配 Windows 系統內建的「表情符號」功能,讓表情符號的應用就更加方便了。

[ Word ]如何使用內建的圖示字型?

[ Word ]如何使用內建的圖示字型?

不論是在網頁、通訊或文書編輯軟體,要使用特殊符號時,我們都可以使用「 Windows + .」快速鍵來開啟 Windows 內建的 Emoji 符號表來挑選,而在 Word 中,除了可以使用 Emoji 外,我們還可以使用 Word 內建的 Segoe UI Emoji 圖示字型來增加應用時的豐富性,例如,🀀🀁🀂🀃🀄🀅🀇🀈🀉🀊🀌🀍🀎🀏,如果還是覺得不足,我們也可以安裝廣受大家好評的 Font Awesome Desktop 圖示字型來使用。

免費可商用的「宅在家自動筆」及「宅在家麥克筆」二款手寫中文字體

免費可商用的「宅在家自動筆」及「宅在家麥克筆」二款手寫中文字體

為不同活動所設計的文宣品或簡報,如果可以考慮活動本身的相關屬性而選用不同的字形來呈現,絕對會比清一色的只使用新細明體或是標楷體來的更吸引目光,想要豐富 Windows 系統內的中文字型,可以考慮小米 MIUI 13 系統內使用的 MiSans 中文字型ButTaiwan 中文注音字型教育部的「楷書」、「宋體」及「隸書」字形或是Font Awesome 圖示字型,都是不錯的選擇,另外,如果需要手寫的中文字型,可以使用「宅在家自動筆」及「宅在家麥克筆」這二款免費的中文字體,不但中文、英文可用,連日文、注音及特殊符號都包含進去了,且還可以商用,有需要都可以安裝試試。

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

「圖示」運用得當,絕對勝過用文字描述,以往要在網頁裡使用圖示,可以使用圖檔,但不論是要更改尺寸、顏色都相當麻煩,而現在大多使用 Icon Font,將圖示變成字形來使用,這樣一來不論日後維護要改尺寸大小、顏色就相當方便,「Google Font」內現在就有提供成套風格且免費的 Icon Font 供使用者應用,如果習慣使用圖檔,每個圖示同樣都有提供 PNG、SVG 圖檔格式,不論是應用在網頁、Android 或是 iOS 都不是問題。