• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / 思源黑體 Noto Sans TC – 由 Google 提供的免費線上 Web Font,讓你免費就能擁有好看的中文字型
Noto Sans TC 在 Google Web Fonts 當中的畫面

思源黑體 Noto Sans TC – 由 Google 提供的免費線上 Web Font,讓你免費就能擁有好看的中文字型

Last Updated on 2020-10-30 By Sliven 2 Comments

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
5 分鐘閱讀

思源黑體 Source Han Sans 是由 Google 和 Adobe 在 2015 年 6 月 16 共同發表的免開源字體,支援繁體中文、簡體中文、日文、韓文等字體。而 Google 公司將此字型另起名為 Noto Sans CJK 釋出。隨後,也在這幾年推出正式的 WebFont – Noto San TC,讓我們不需要下載整個完整的語言檔案,也能直接使用託管在 Google Fonts 當中的 Noto Sans TC 的 CSS Web Font 字體。

Google Fonts 最早只在 Early Access 當中提供 Noto Sans 的思源黑體 Beta 版本,且當時還未提供 CJK TC 繁體,因此在當時若想要直接取用 Web Font,是無法直接引用完整的 Noto Sans CJK TC,而是必須要將整個字體下載,並上傳至主機當中後,才能讀取完整的檔案。

而現在,我們終於可以直接在 Google Fonts 當中,直接嵌入託管在 Google Fonts 當中的 Noto Sans TC 正式版字體。

今天除了要教你在網站中直接載入 Google Fonts 當中的 Noto Sans TC 字體之外,也要告訴你如何改善網站載入字體前,會預先載入 Web Font 的字體,讓你的文字內容不會跳一下或消失再出現的情況。

網站名稱:Noto Sans TC – Google Fonts
網站網址:https://fonts.google.com/specimen/Noto+Sans+TC

目錄
  1. 1. Noto Sans TC 使用教學
  2. 2. 到 Google Fonts 尋找字體
  3. 3. 指定字體客製化樣式
  4. 4. 選擇 Noto Sans TC Web Font 字型
  5. 5. 客製化 Noto Sans TC Web Fonts 字體
  6. 6. 匯入 Noto Sans TC Web Font CSS 檔案
  7. 7. 定義 font-family 字型
  8. 8. 你可能有興趣
  9. 9. 更多相關文章

Noto Sans TC 使用教學

步驟一

到 Google Fonts 尋找字體

為了要使用 Noto Sans TC 的 Web Font,我們需要先到 Google Fonts 當中,找到 Noto Sans TC 的字型頁面。

你可以在進入 Google Fonts 頁面之後,在右上方的搜尋框當中輸入「Noto Sans TC」找到該字體:

在 Google Fonts 當中搜尋 Noto Sans TC
在 Google Fonts 當中搜尋 Noto Sans TC
步驟二

指定字體客製化樣式

進入 Noto Sans TC 字體頁面之後,會顯示目前字體所包含的所有字元與樣式:

Noto Sans TC 在 Google Web Fonts 當中的畫面
Noto Sans TC 在 Google Web Fonts 當中的畫面

往下拉一點,你可以在 Google Fonts 當中的 Styles 欄位當中,輸入你的測試文字,來看看套用 Noto Sans TC 後所顯示的字體畫面,同時 Google Fonts 也會顯示目前這個字體的字體大小為何。

再繼續往下拉一點,你會看到左下角能夠預先選擇 Noto Sans TC 的 Style,例如:

  • Thin
  • Light
  • Regular
  • Medium
  • Bold
  • Black

如果沒有特別指定,那麼字體就保留預設的 Regular 就可以了:

在 Google Fonts 當中,可預先選擇 Noto Sans TC 載入時的字體樣式
在 Google Fonts 當中,可預先選擇 Noto Sans TC 載入時的字體樣式
步驟三

選擇 Noto Sans TC Web Font 字型

接下來,就要取得 Noto Sans TC 的 CSS 樣式,因此我們回到最上方右上角的地方,點選「SELECT THIS FONT」,就能取得 Embed font 的 CSS 樣式:

點選右上角「SELECT THIS FONT」顯示 Embed Font 的 CSS 程式碼
點選右上角「SELECT THIS FONT」顯示 Embed Font 的 CSS 程式碼
取得 Embed Font CSS 程式碼
取得 Embed Font CSS 程式碼
步驟四

客製化 Noto Sans TC Web Fonts 字體

剛剛提到 Google Fonts 字體可以在載入時先載入客製化的字體樣式,如此可以讓我們只針對指定的字體載入,而不需要載入整個 Noto Sans TC 的字體,大大降低載入字體的大小:

客製化 Noto Sans TC 字體,讓載入時僅載入所需要的樣式,降低 CSS 載入大小
客製化 Noto Sans TC 字體,讓載入時僅載入所需要的樣式,降低 CSS 載入大小

最後再回到「EMBED」,取得最後所需要的 CSS 樣式載入連結:

取得客製化完後的 CSS Embed 程式碼
取得客製化完後的 CSS Embed 程式碼

重點提示

以往使用 Google Fonts 取得 Noto Sans TC 的 Web Fonts CSS 字體後,網站會無法使用 font-display 的功能來優化內容載入字體的效果。

最終會導致使用者在載入網站時,會有「網站內容消失,跳一下再出現」的小問題。

而現在,Google Fonts 能夠支援直接在載入 Web Font 時,直接使用 display=swap 來優化字體載入效果,讓網站字體會更加順暢,改善網站載入時,字體會消失、跳一下的問題。

由上述可知,以前在使用 Google Fonts 取得 Noto Sans TC Web Font 字體時,只能使用:

HTML

而現在 Google Fonts 開始支援直接在 Web Font 當中使用 Display 參數後,所取得的 Web Font link 就會變成:

HTML

因此現在即使是載入 Google Fonts 的 Noto Sans TC Web Font 字體,也能有「font-display=swap」的效果。

You will not have to self-host Google Fonts any more to get font-display: swap; 🙌 #io19 pic.twitter.com/SldOuoNInF

— Anna Migas (@szynszyliszys) May 8, 2019
步驟五

匯入 Noto Sans TC Web Font CSS 檔案

Google Fonts 提供兩種方式讓網站匯入 Web Font 字體,第一種為 STANDARD 型:

HTML

如果是使用這個類型,你直接將上方的程式碼加到網站當中 <head> 與 </haed> 之間就可以了。

第二種是 @IMPORT 型:

CSS

如果是使用這個類型,則需要將其中的:「@import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&subset=chinese-traditional’);」加入到 <style> 與 </style> 之間。

步驟六

定義 font-family 字型

現在我們已經網站已經從 Google Fonts 當中匯入了 Noto Sans TC 的 Web Font 檔案,接著就可以將網站的字體使用 font-family 指定為 Noto Sans TC 了:

CSS

以上就是使用 Google Fonts 讓網站匯入 Noto Sans TC 思源黑體的教學,由於 Google Fonts 現在已經能夠在其 Web Font 上加入「display=swap」功能了,因此能夠大大優化網站的載入速度。

如果你喜歡我們今天分享的「Noto Sans TC 思源黑體教學」,歡迎分享出去讓更多人知道,謝謝!

你可能有興趣

  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
  • Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
  • Lens – Mac 免費開源圖片格式轉換工具,可批次處理大量圖片支援 JPG、PNG 與 GIF 格式
  • 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
  • 【WordPress 付費主題免費下載】Danni — Minimalist WordPress Blog Theme
  • Free Deca UI Kit – 簡潔 UI Kit 素材免費下載,提供 Figma 與 Sketch 設計軟體格式
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據

更多相關文章

  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • RunCloud - 在 VPS 中一鍵安裝 WordPress 網站
  • Tabler Icons - 超過 558+ 高品質圖標 SVG 格式免費下載,MIT 授權可線上客製化圖示樣式
  • 使用 .htaccess 實現 Redirect 301/302 重定向轉址規則
  • (2021 年 1 月)Udemy 免費課程優惠碼 - 付費課程限時折扣 0 元免費線上學習
  • Iconpie - 快速免費產生網站圖標 Icons,上傳圖片後自動產生 Web、iOS、Android 圖標
  • Joplin - 替代 Evernote、Notion 的開源代辦筆記本程式
  • iconmonstr - 4496+ 可商用 CC0 大量圖標 Icons 免費下載,另提供 Iconic Font 字體線上使用
  • PixelMe - 線上免費短網址服務,可添加個人網域作為品牌短網址 URL 與分析追蹤數據!
  • 1.1.1.1 最快速最安全的 DNS 服務,CloudFlare 加速你的上網速度與網路安全性
  • 超過 40 個線上學習網站 - 網頁設計、程式語言、各種領域線上課程免費/付費資源索引
  • WordPress 虛擬主機推薦比較(2021 年 2 月)- 最熱門 16 個 WordPress 主機費用、速度與方案完整評價介紹

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 免費資源 標籤: Google Fonts, Noto Sans TC, Web Font, 中文字型, 中文字體, 免費中文字型, 免費中文字體, 思源黑體

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

Comments

  1. Leo says

    2020-03-27 at 15:41:24

    謝謝你文章. 他解決了我如何有效率地 include NotoSans TC 入網站, 打開網頁的速度快了幾秒. 實在太好了.

    回覆
    • Sliven says

      2020-03-28 at 07:35:13

      Hi Leo,
      很高興幫助到你!

      回覆

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • 【WordPress 付費主題免費下載】Fotofly | Photography WordPress Theme
  • 【WordPress 付費主題免費下載】Solaz – An Elegant Hotel & Lodge WordPress Theme
  • 【WordPress 付費主題免費下載】AppArt – Creative WordPress Theme For Apps Saas
  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
  • G Suite 教育版更名為 Google Workspace for Education,並取消無限制儲存空間限制至 100 TB
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • PDF.new - Adobe 攜手 Google 提供「.new」相關 PDF 免費線上轉檔服務
  • Recompressor 免費線上圖片壓縮工具 - 幫你找出最佳圖片壓縮比例
  • Whoooa! - 120 個可自定義手繪向量插圖,提供所有設計軟體格式,特惠 30% 折扣限量索取!
  • 【WordPress 付費主題免費下載】Impose Blog
  • Joplin - 替代 Evernote、Notion 的開源代辦筆記本程式
  • 「韓流終結者」台灣駭客利用 AI 技術,開發 Chrome 擴充外掛自動遮住韓國瑜的臉!
  • 使用 .htaccess 實現 Redirect 301/302 重定向轉址規則
  • 如何解決在 WordPress 當中遇到建立數據庫連線時發生錯誤(Establishing a Database Connection)的情況
  • Fotor 評價 - 跨平台 APP 免費線上圖片編輯軟體,照片美化與合併完整教學
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發

相關文章

  • CSS box-shadow examples by CSS Scan – 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
  • Artify.co – 免費線上圖片設計編輯工具,強大功能幫助你快速建立精美特色圖片
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • PDF.new – Adobe 攜手 Google 提供「.new」相關 PDF 免費線上轉檔服務
  • QuickFin.AI – 透過英語提問立即獲得美股 S&P 500 公司財報數據與相關資訊,新手投資美股的好幫手
  • Joplin – 替代 Evernote、Notion 的開源代辦筆記本程式
  • 2021 最新 35 個推薦可商用免版權線上免費圖片,各種風景素材背景圖片、影片素材免費圖庫懶人包!
  • Simple Ops – 免費網站運行監測線上工具,即時紀錄網站性能與提供警報,隨時提醒網站運行狀態
  • LineIcons – 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
  • Generated Photos – 透過 AI 製作出獨特的人物照片,可免費下載與提供個人使用,還可付費進行商業使用
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明