共用方式為

Windows 中的印刷樣式

在 Segoe UI 變數中轉譯的數個字

作為語言的視覺表示，印刷格式的主要工作是溝通資訊。 Windows 類型系統可協助您在內容中建立結構和階層，以在 UI 中最大化可讀性和可讀性。

Segoe UI 變數 是 Windows 的新系統字型。 這是對經典的 Segoe 字型的更新版本，利用可變字型技術，在非常小的尺寸下保持了很好的易讀性，並在顯示尺寸下改進了輪廓。

提示

本文說明 Fluent Design 語言 如何套用至 Windows 應用程式。 如需詳細資訊，請參閱 Fluent Design - 印刷樣式。

使用 Segoe Fluent Variable

Segoe UI 變數支援兩個軸，可更精細地控制文字： 重量 和 光學大小。

  • 加權軸 （wght） 是累加的，重量從細 （100） 到粗體 （700）。
  • 光學大小軸 （opsz） 預設為自動開啟。 它會控制字型中計數器的形狀和大小，以在大尺寸和個性上排定可讀性（從 8pt 到 36pt 的光學縮放比例）。

使用 XAML 通用控制項時，預設會針對支援的語言選取 Segoe UI 可變字型。 當使用此字型或具有光學軸的其他可變字型時，光學大小將自動根據所要求的字體大小進行調整。 使用 HTML 時，光學縮放也是自動的，但您必須在 CSS 中指定 Segoe UI Variable 字型。

以 Segoe UI Variable 字體呈現的 'Segoe' 一詞，並強調了該字體的幾個特徵

權重

粗細名稱 粗細軸值 視覺效果
光 300 在 Segoe UI 變數光線中呈現的 'Segoe' 一詞
半光 350 在 Segoe UI 變數半光中轉譯的 'Segoe' 一字
定期 400 'Segoe' 一詞以 Segoe UI Variable 常規字型顯示
半粗體 600 'Segoe' 字體以 Segoe UI Variable semibold 呈現
大膽 700 在 Segoe UI 變數粗體中呈現的 'Segoe' 一字

光軸

在 Segoe UI 變體字體中呈現的小寫字母 a，其外形會根據不同的顯示情境而改變。

Windows 11 中的印刷樣式最佳做法

Windows 11 會根據顯示文字的內容，搭配下列屬性使用 Segoe UI Variable。

屬性 值 備註
重量 常規、半粗體 對大部分文字使用常規粗細，針對標題使用半粗體
對準 左，中間 依預設靠左對齊，僅在少數情況下對齊置中，例如圖示下方的文字
最小值 14px 半粗體、12px 常規 在某些語言中，小於這些大小和粗細的文字無法辨識
套管 首字母大寫 對所有 UI 文字 (包括標題) 首字母大寫
截斷 省略符號和裁剪 在大部分案例下使用省略號；裁剪僅適用於罕見的案例

範例

開啟 WinUI 3 Gallery 應用程式，並查看字體原則的實際應用情況

WinUI 3 資源庫應用程式包含大部分 WinUI 3 控制件、特性和功能的互動式範例。 從 Microsoft 市集取得應用程式，或在 GitHub 上取得原始程式碼

Windows 應用程式中的印刷樣式

主視覺

作為語言的視覺表示，印刷格式的主要工作是溝通資訊。 其樣式絕對不能阻礙這項目標。 在這篇文章中，我們將會討論如何在您的 Windows 應用程式中設定印刷樣式，以協助使用者輕鬆且有效地了解內容。

字型

您應該在整個應用程式的UI中使用一個字型，我們建議使用Windows應用程式的預設字型 Segoe UI 變數。 它設計成可維持不同大小和像素密度的最佳可讀性，並能提供輔助系統內容的乾淨、明亮、開放審美觀。

Segoe UI 字型變數範例文字。

若要顯示非英文語言或選擇不同的應用程式字型，請參閱我們的 Windows 應用程式建議字型在 語言 和 字型。

大小和縮放比例

XAML 應用程式中的字型大小會自動在所有裝置上縮放。 縮放演算法可確保 10 英呎大螢幕上的 24 px 字型與距離幾英寸的小螢幕上的 24 px 字型一樣清晰可見。

檢視不同裝置的距離。

因為縮放比例系統的運作方式，您是以有效像素進行設計，而不是實際實體像素，而且您不應根據不同的螢幕大小或解析度來變更字型大小。

階層

使用者在掃描頁面時依賴視覺階層：標頭摘要顯示內容，本文提供更多詳細資料。 若要在應用程式中建立清楚的視覺階層，請遵循 Windows 字體坡形。

三行文字的螢幕快照，其中字型大小從一行縮小到下一行。

字型坡形

Windows 字體坡形可在頁面的類型之間建立重要關係，協助使用者輕鬆閱讀內容。 所有大小都是有效圖元，且已針對在所有螢幕大小上執行的 Windows 應用程式優化。

Windows 11 針對 UI 中的各種文字類型使用下列值。

範例 權數 大小/線條高度
標題文字的範例 小 12/16 EPX
內文文字範例 文字 14/20 epx
內文強文字的範例 文字半粗體 14/20 epx
大型正文文字的範例 文字 18/24 EPX
副標題文字的範例 顯示半粗體 20/28 epx
標題文字的範例 顯示半粗體 28/36 epx
標題大型文字的範例 顯示半粗體 40/52 epx
顯示文字的範例 顯示半粗體 68/92 EPX

如需詳細資訊，請參閱使用 XAML 類型坡形 的指引。

對齊方式

默認 TextAlignment 是左對齊，而且在大部分情況下，左對齊並右邊不齊的排版能一致地錨定內容，提供統一的版面配置。 如需 RTL 語言，請參閱 調整版面配置和字型以支援全球化。

顯示左對齊的文字。 

<TextBlock TextAlignment="Left">

字元計數

這是標有綠色勾選標記及顯示單字 保持每行 50–60 個字母，以方便閱讀。

不要 請勿使用少於 20 個字元或每行 60 個字元，因為這是難以閱讀的。

裁剪和省略符號

當文字數量超出可用空間時，建議您裁剪文字並插入省略號 [...]，這是大部分 UWP 文字控件的默認行為。

顯示具有一些文字裁剪的裝置畫面格。 

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

綠色列的第五張螢幕截圖，具有綠色核選標記和單詞 Do。 剪裁文字，如果啟用多行，則自動換行。

不要 請勿使用省略號來避免視覺雜亂。

注意

如果容器未明確定義 (例如，沒有區別的背景色彩)，或是有連結可顯示更多文字，則請使用省略符號。

語言

Segoe UI Variable 是我們英文、歐洲語言、希臘文和俄文的字型。 對於其他語言，請參閱下列建議。

全球化/當地語系化字型

使用 LanguageFont 字型對應 API ，以程式設計方式存取特定語言的建議字型系列、大小、粗細和樣式。 LanguageFont 物件提供各種內容類別的正確字型資訊存取權，包括 UI 標頭、通知、內文文字，以及使用者可編輯的文件本文字型。 如需詳細資訊，請參閱 調整版面配置和字型以支援全球化。

非拉丁語言的字型

字型家族 樣式 備註
埃布里瑪 常規、粗體 非洲字型的使用者介面字型 (ADLaM、Epic、N'Ko、Osmanya、Tifinagh、Vai)。
加杜吉 常規、粗體 北美洲字型的使用者介面字型 (加拿大音節文字、切羅基文、奧薩奇文)。
Leelawadee 用戶界面

 常規、稍細體、粗體 東南亞字型的使用者介面字型 (布吉文、高棉文、寮文、泰文)。
瑪律貢哥特式

 一般 韓文的使用者介面字型。
Microsoft JhengHei 用戶介面

 常規、粗體、細體 繁體中文的使用者介面字型。
Microsoft YaHei 用戶介面

 常規、粗體、細體 簡體中文的使用者介面字型。
緬甸文字

 一般 緬甸字型的後援字型。
尼爾馬拉用戶界面

 常規、稍細體、粗體 南亞字型的使用者介面字型 (孟加拉文、查克馬文、梵文字母、古吉拉特文、果魯穆奇文、坎納達文、馬來亞拉姆文、曼尼普爾文、歐迪亞文、桑塔爾文、僧伽羅文、索朗桑朋文、坦米爾文、泰盧固文)。
Segoe UI

 常規、斜體、細斜體、黑體斜體、粗體、粗斜體、細體、稍細體、略粗體、黑體 阿拉伯文、亞美尼亞文、喬治亞文和希伯來文的使用者介面字型。
西姆森

 一般 舊版中文 UI 字型。
Yu Gothic UI

 細體、半細體、標準、半粗體、粗體 日文的使用者介面字型。

字型

Sans-serif 字型

Sans-serif 字型是標題和 UI 元素的絕佳選擇。

字型家族 樣式 備註
阿里亞爾 常規、斜體、粗體、粗斜體、黑體 支援歐洲和中東字型 (拉丁文、希臘文、斯拉夫文、阿拉伯文、亞美尼亞文和希伯來文)。 黑體字重僅支持歐洲文字。
口徑 常規、斜體、粗體、粗斜體、細體、細斜體 支援歐洲和中東字型 (拉丁文、希臘文、西里爾文、阿拉伯文和希伯來文)。 阿拉伯文僅適用於直立。
康索拉斯 常規、斜體、粗體、粗斜體 固定寬度字型，支援歐洲字型 (拉丁文、希臘文和西里爾文)。
Segoe UI 常規、斜體、細斜體、黑體斜體、粗體、粗斜體、細體、稍細體、略粗體、黑體 歐洲和中東字型的使用者介面字型 (阿拉伯文、亞美尼亞文、西里爾文、喬治亞文、希臘文、希伯來文、拉丁文)，以及傈僳文字型。
塞拉維克 常規、稍細體、細體、粗體、略粗體 與 Segoe UI 計量相容的開放原始碼字體，適用於不想捆綁 Segoe UI 的其他平台上的應用程式。 在 GitHub 上取得 Selawik。

Serif 字型

Serif 字型適合用來呈現大量的文字。

字型家族 樣式 備註
坎布里亞 一般 支援歐洲文字 (拉丁文、希臘文、西里爾文) Serif 字型。
信使新 常規、斜體、粗體、粗斜體 Serif 固定寬度字型，支援歐洲和中東字型 (拉丁文、希臘文、西里爾文、阿拉伯文、亞美尼亞文和希伯來文)。
喬治亞 常規、斜體、粗體、粗斜體 支援歐洲字型 (拉丁文、希臘文和西里爾文)。
Tw Cen MT Condensed 常規、斜體、粗體、粗斜體 支援歐洲字型的舊字型 (拉丁文、希臘文、西里爾文、阿拉伯文、亞美尼亞文、希伯來文)。

可變字型

可變字型適用於精確控制文字外觀。

字型家族 軸 備註
班施里夫特 字重、字寬 支援拉丁文、希臘文和西里爾文的可變字型。
Segoe UI 變數 字重、光學大小 支援拉丁文、希臘文和西里爾文的可變字型。

符號和圖示

字型家族 樣式 備註
Segoe MDL2 資產 一般 應用程式圖示的使用者介面字型。 如需詳細資訊，請參閱 Segoe Fluent Icons 字型 文章。
Segoe UI 表情符號 一般 Emoji 的使用者介面字型。
Segoe UI 符號 一般 符號的後援字型。
  • Last updated on