共用方式為

Windows 中的印刷樣式

  • 發行項

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

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

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

提示

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

使用 Segoe Fluent Variable

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

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

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

在 Segoe UI 變數中轉譯的 'Segoe' 一詞，其中已醒目提示字樣的幾個層面

權重

粗細名稱 粗細軸值 視覺效果
淺色 300 在 Segoe UI 變數光線中呈現的 'Segoe' 一詞
稍細體 350 在 Segoe UI 變數半光中轉譯的 'Segoe' 一字
一般 400 在 Segoe UI 變數中轉譯的 'Segoe' 一詞
半粗體 600 在 Segoe UI 變數中轉譯的 'Segoe' 一字
粗體字 700 在 Segoe UI 變數粗體中呈現的 'Segoe' 一字

光軸

在 Segoe UI 變數中轉譯的小寫字母，其外框會根據呈現的不同圖形內容

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

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

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

範例

開啟 WinUI 3 資源庫應用程式，並查看實際的印刷樣式原則。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

Windows 應用程式中的印刷樣式

主角圖像

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

字型

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

Segoe UI 變數字型的範例文字。

若要顯示非英文語言或為應用程式選取不同字型，請參閱語言和字型以了解我們對 Windows 應用程式的建議使用字型。

大小和縮放比例

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

不同裝置的檢視距離。

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

階層

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

三行文字的螢幕擷取畫面，其中的字型大小從一行到下一行逐漸變小。

字型坡形

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

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

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

查看有關使用 XAML 字型坡形的指南以了解更多詳細資訊。

對齊方式

預設 TextAlignment 是 Left，而在大部分情況下，靠左和不齊右方法可提供一致的內容錨定與統一的配置。 對於 RTL 語言，請參閱調整配置和字型以支援全球化。

顯示排清左的文字。

<TextBlock TextAlignment="Left">

字元計數

綠色長條的第四個螢幕擷取畫面，內有綠色核取記號和 Do 一字。每行維持 50–60 個字母以利閱讀。

這次 每行請勿少於 20 個字元或超過 60 個字元，因為這樣會難以閱讀。

裁剪和省略符號

當文字量超過可用空間時，建議裁剪文字並插入省略符號 [...]，這是大部分 UWP 文字控制項的預設行為。

顯示使用文字裁剪的裝置框架。

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

綠色長條的第五個螢幕擷取畫面，內有綠色核取記號和 Do 一字。 裁剪文字，如果啟用多行則換行。

這次 請勿使用省略符號以避免視覺干擾。

注意

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

語言

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

全球化/當地語系化字型

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

非拉丁語言的字型

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

 常規、稍細體、粗體 東南亞字型的使用者介面字型 (布吉文、高棉文、寮文、泰文)。
Malgun Gothic

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

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

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

 一般 緬甸字型的後援字型。
Nirmala UI

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

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

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

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

字型

Sans-serif 字型

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

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

Serif 字型

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

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

可變字型

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

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

符號和圖示

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