適用於 Visual Studio 的字型和格式設定
環境字型
Visual Studio 中的所有字型都必須公開給用戶以進行自定義。 這主要是透過 [工具>選項] 對話方塊中的 [字型和色彩] 頁面來完成。 字型設定的三個主要類別如下:
環境字型 - IDE 的主要字 型(集成開發環境),用於所有介面元素,包括對話框、功能表、工具視窗和文檔視窗。 根據預設,環境字型會系結至目前 Windows 版本中顯示為 9 pt Segoe UI 的系統字型。 針對所有介面元素使用一個字型有助於確保整個 IDE 的字型外觀一致。
文字編輯器 - 可在 [工具>選項] 的 [文字編輯器] 頁面中自定義程式代碼和其他以文字為基礎的編輯器中呈現的專案。
特定集合 - 提供使用者自定義介面元素的設計視窗,可能會在 [工具選項] 的 [ 工具 > 選項] 中,公開其設計介面專屬的字型。
編輯器字型自定義和重設大小
使用者通常會根據使用者的喜好設定,放大或縮放編輯器中文字的大小和/或色彩,與一般使用者介面無關。 由於環境字型用於可能出現在編輯器/設計工具內或做為編輯器/設計工具一部分的專案上,因此當其中一個字型分類變更時,請務必注意預期的行為。
建立出現在編輯器中但不屬於 內容的UI元素時,請務必使用環境字型,而不是文字字型,讓元素以可預測的方式重設大小。
針對編輯器中的程式碼文字,請使用程式碼文字字型設定重設大小,並響應編輯器文本的縮放層級。
介面的所有其他元素都應該系結至環境字型設定,並響應環境中的任何全域變更。 其中包括 (但不限於):
操作功能表中的文字
編輯器裝飾中的文字,例如燈泡菜單文字、快速尋找編輯器窗格,以及瀏覽至窗格
對話框中的標籤文字,例如 [在檔案 中尋找] 或 [重構]
存取環境字型
在 Native 或 WinForms 程式代碼中,環境字型可以在從SID_SUIHostLocale
服務查詢介面之後呼叫 方法IUIHostLocale::GetDialogFont
來存取。
針對 Windows Presentation Foundation (WPF),請從殼層的 DialogWindow
類別衍生您的對話框窗口類別,而不是 WPF 的 Window
類別。
在 XAML 中,程式代碼看起來像這樣:
<ui:DialogWindow
x:Class"MyNameSpace.MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:s="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.11.0"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner"
Title="My Dialog">
</ui:DialogWindow>
程式代碼後置:
internal partial class WebConfigModificationWindow : DialogWindow
{
}
(以目前版本的 MPF dll 取代 Microsoft.VisualStudio.Shell.11.0
。
若要顯示對話框,請在 類別ShowDialog()
上呼叫 “ShowModal()
” ShowModal()
會設定殼層中正確的強制回應狀態、確保對話框置中於父視窗等等。
程式碼如下所示:
MyWindow window = new MyWindow();
window.ShowModal()
ShowModal
會傳回bool? (可為 Null 的布爾值) 與 DialogResult
,如有需要可以使用。 如果對話框以OK關閉,則傳回值為 true。
如果您需要顯示一些不是對話框且載入於自己的 HwndSource
WPF UI,例如 Win32/WinForms 父視窗的彈出視窗或 WPF 子視窗,則必須在 WPF 元素的根元素上設定 FontFamily
和 FontSize
。 (殼層會在主視窗上設定屬性,但不會繼承超過。HWND
殼層會提供屬性可以系結的資源,如下所示:
<Setter Property="FontFamily" Value="{DynamicResource VsFont.EnvironmentFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource VsFont.EnvironmentFontSize}" />
格式化 (縮放/粗體) 參考
某些對話框需要特定文字為粗體或環境字型以外的大小。 先前,大於環境字型的字型會編碼為 “environment font +2
” 或類似字型。 使用所提供的代碼段可支援高 DPI 監視器,並確保顯示文字一律以正確的大小和重量顯示(例如淺色或半光)。
注意
套用格式設定之前,請確定您遵循文字樣式中找到的指引。**
若要調整環境字型,請依指示設定 TextBlock 或 Label 的樣式。 每個適當使用的代碼段都會產生正確的字型,包括適當的大小和粗細變化。
其中 「vsui
是命名空間 Microsoft.VisualStudio.Shell
的參考:
xmlns:vsui="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.14.0"
375% 環境字型 + 淺色
顯示為: 34 pt Segoe UI 淺色
用於: (罕見)獨特的品牌UI
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment375PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment375PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示。
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment375PercentFontSizeStyleKey}}">TextBlock: 375 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment375PercentFontSizeStyleKey}}">Label: 375 Percent Scaling</Label>
310% 環境字型 + 淺色
顯示為: 28 pt Segoe UI Light Use for: large signature dialog titles, main heading in reports
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment310PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment310PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示。
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment310PercentFontSizeStyleKey}}">TextBlock: 310 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment310PercentFontSizeStyleKey}}">Label: 310 Percent Scaling</Label>
200% 環境字型 + 半光
顯示為: 18 pt Segoe UI Semilight Use for: subheadings, titles in small and medium dialogs
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment200PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment200PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示:
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment200PercentFontSizeStyleKey}}">TextBlock: 200 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment200PercentFontSizeStyleKey}}">Label: 200 Percent Scaling</Label>
155% 環境字型
顯示為:14 pt Segoe UI 用於:檔井 UI 或報表中的區段標題
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment155PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment155PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示:
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment155PercentFontSizeStyleKey}}">TextBlock: 155 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment155PercentFontSizeStyleKey}}">Label: 155 Percent Scaling</Label>
133% 環境字型
顯示為: 12 pt Segoe UI 用於: 簽章對話框中較小的子標題,並記錄良好的 UI
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment133PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment133PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示:
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment133PercentFontSizeStyleKey}}">TextBlock: 133 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment133PercentFontSizeStyleKey}}">Label: 133 Percent Scaling</Label>
122% 環境字型
顯示為:11 pt Segoe UI 用於:簽章對話框中的區段標題、樹檢視中的頂端節點、垂直索引卷標流覽
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironment122PercentFontSizeStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironment122PercentFontSizeStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示:
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironment122PercentFontSizeStyleKey}}">TextBlock: 122 Percent Scaling</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironment122PercentFontSizeStyleKey}}">Label: 122 Percent Scaling</Label>
環境字型 + 粗體
顯示為: 粗體 9 pt Segoe UI 用於: 簽章對話框中的卷標和子標題、報表和檔井 UI
程式代碼: 其中 textBlock
是先前定義的 TextBlock,而且 label
是先前定義的標籤:
textBlock.SetResourceReference(TextBlock.StyleProperty,
VsResourceKeys.TextBlockEnvironmentBoldStyleKey);
label.SetResourceReference(Label.StyleProperty,
VsResourceKeys.LabelEnvironmentBoldStyleKey);
XAML: 設定 TextBlock 或 Label 的樣式,如下所示:
<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironmentBoldStyleKey}}"> Bold TextBlock</TextBlock>
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironmentBoldStyleKey}}"> Bold Label</Label>
可本地化的樣式
在某些情況下,當地語系化人員必須修改不同地區設定的字型樣式,例如從東亞語言的文字中移除粗體。 若要使字型樣式的當地語系化成為可能,這些樣式必須在 .resx 檔案內。 在 Visual Studio 表單設計工具中完成這項操作,但仍編輯字型樣式的最佳方式,是在設計時間明確設定字型樣式。 雖然這會建立完整的字型物件,而且似乎會中斷父字型的繼承,但只會使用FontStyle屬性來設定字型。
解決方案是連結對話框表單的事件 FontChanged
。 在事件中 FontChanged
,請檢視所有控件,並檢查其字型是否已設定。 如果設定,請根據表單的字型和控件先前的字型樣式,將它變更為新的字型。 程式代碼中的這個範例如下:
private void Form1_FontChanged(object sender, System.EventArgs e)
{
SetFontStyles();
}
/// <summary>
/// SetFontStyles - This function will iterate all controls on a page
/// and recreate their font with the desired fontstyle.
/// It should be called in the OnFontChanged handler (and also in the constructor
/// in case the IUIService is not available so OnFontChange doesn't fire).
/// This way, when the VS shell font is given to us the controls that have
/// a different style for the font (bolded for example) will recreate their font
/// and use the VS shell font but with a style variation (bolded ...).
/// </summary>
protected void SetFontStyles()
{
SetFontStyles(this, this, this.Font);
}
protected static void SetFontStyles(Control topControl, Control parent, Font referenceFont)
{
foreach(Control c in parent.Controls)
{
if (c.Controls != null && c.Controls.Count > 0) {
SetFontStyles(topControl, c, referenceFont);
}
if (c.Font != topControl.Font) {
c.Font = new Font(referenceFont, c.Font.Style);
}
}
}
使用此程式代碼可確保當表單的字型更新時,控件的字型也會更新。 這個方法也應該從窗體的建構函式呼叫,因為對話框可能無法取得的實例 IUIService
,而且 FontChanged
事件永遠不會引發。 FontChanged
即使對話框已經開啟,連結仍可讓對話動態挑選新的字型。
測試環境字型
若要確保您的UI使用環境字型並遵守大小設定,請開啟 [工具 > 選項 > 環境 > 字型和色彩 ],然後在 [顯示設定為:] 下拉功能表底下選取 [環境字型]。
[工具 > 選項] 對話框中的字型和色彩設定
將字型設定為與預設值非常不同的字型。 為了讓 UI 無法更新,請選擇具有 Serifs 的字型(例如“時代新羅馬”),並設定非常大的大小。 然後測試您的UI,以確保它遵守環境。 以下是使用授權對話框的範例:
不符合環境字型的UI文字範例
在此情況下,「用戶資訊」和「產品資訊」不尊重字型。 在某些情況下,這可能是明確的設計選擇,但如果未將明確字型指定為紅線規格的一部分,則可能是 Bug。
若要重設字型,請按兩下 [工具>選項>環境>字型和色彩] 下的[使用預設值]。
文字樣式
文字樣式是指字型大小、粗細和大小寫。 如需實作指引,請參閱 環境字型。
文字大小寫
全部大寫
請勿在 Visual Studio 中使用標題或標籤的所有上限。
全部小寫
請勿將所有小寫用於 Visual Studio 中的標題或標籤。
句子和標題大小寫
Visual Studio 中的文字應該根據方式使用標題大小寫或句子大小寫。
使用下列項目的標題案例: | 針對下列專案使用句子案例: |
---|---|
對話框標題 | 標籤 |
群組方塊 | 核取方塊 |
功能表項目 | 選項按鈕 |
操作功能表項目 | 清單方塊項目 |
按鈕 | 狀態列 |
數據表標籤 | |
資料行標題 | |
工具提示 |
標題大小寫
標題大小寫是一種樣式,其中片語內大部分或所有單字的第一個字母都會大寫。 在 Visual Studio 中,標題案例用於許多專案,包括:
提示。 範例:“預覽選取的專案”
數據行標頭。 範例:“系統回應”
功能表項。 範例:“全部儲存”
使用標題大小寫時,這些是何時將單字大寫和何時保留小寫的指導方針:
大寫 | 批注和範例 |
---|---|
所有名詞 | |
所有動詞 | 包括 “Is” 和其他形式的 “to be” |
所有對手 | 包括 “Than” 和 “When” |
所有形容詞 | 包括 “This” 和 “That” |
所有代名詞 | 包括擁有性的“它”和“它”,一個代名詞“它”和動詞 “is” 的收縮 |
無論語音部分為何,第一個和最後一個字 | |
屬於動詞片組一部分的前置詞 | 「關閉所有視窗」或「關閉系統」 |
縮略字的所有字母 | HTML、XML、URL、IDE、RGB |
如果是名詞或適當的形容詞,或在單字中具有相等權數,則複合字中的第二個單字 | 跨參考、預先 Microsoft 軟體、讀取/寫入存取、運行時間 |
小寫 | 範例 |
---|---|
如果這是另一個語音部分或部分修改第一個單字,則複合字中的第二個單字 | 操作說明、起飛 |
文章,除非其中一個是標題中的第一個字 | a、a、、 |
座標結合 | 和,但是,針對、或 |
在動詞片組外加上四個或更少字母的片語 | 進入, 到, 至於, 出, 在頂部 |
在定義片語中使用 “To” | 「如何格式化硬碟」 |
句子大小寫
句子大小寫是撰寫的標準大寫方法,其中只有句子的第一個單字會大寫,以及任何適當的名詞和代名詞“I”。一般而言,全球觀眾更容易閱讀句子案例,尤其是在計算機翻譯內容時。 針對下列專案使用句子案例:
狀態列訊息。 這些是簡單、簡短且僅提供狀態資訊。 範例:“載入項目檔”
所有其他 UI 元素,包括標籤、複選框、單選按鈕和清單框專案。 範例:「選取清單中的所有專案」
文字格式設定
Visual Studio 2013 中的預設文字格式是由 環境字型所控制。 此服務可協助確保整個 IDE(整合開發環境)的字型外觀一致,而且您必須使用它來保證使用者的一致體驗。
Visual Studio 字型服務使用的預設大小來自 Windows,並顯示為 9 pt。
您可以將格式設定套用至環境字型。 本主題涵蓋如何使用樣式的方式和位置。 如需實作資訊,請參閱 環境字型。
粗體文字
在 Visual Studio 中謹慎使用粗體文字,應該保留給:
精靈中的問題標籤
在方案總管 中指定使用中的專案
在 [屬性] 工具視窗中覆寫值
Visual Basic 編輯器下拉式清單中的特定事件
網頁檔大綱中的伺服器產生內容
複雜對話或設計工具 UI 中的區段標頭
斜體
Visual Studio 不會使用斜體或粗體斜體文字。
Color
藍色保留給超連結(導覽和命令),不應該用於方向。
較大的標題(環境字型 x 155% 或更高)可以針對下列目的著色:
提供視覺吸引力以簽章 Visual Studio UI
若要引起特定區域的注意
提供標準深灰色/黑色環境文字色彩的緩解
標題中的色彩應運用現有的 Visual Studio 品牌色彩,主要是主要紫色,#FF68217A。
在標題中使用色彩時,您必須遵守 Windows 色彩指導方針,包括對比比例和其他輔助功能考慮。
字型大小
Visual Studio UI 設計具有較輕的外觀,具有更多空格符。 可能的話,已減少或移除 Chrome 和標題列。 雖然資訊密度是Visual Studio中的需求,但印刷樣式仍然很重要,強調更開放的行距和字型大小和粗細的變化。
下表包含 Visual Studio 中所使用之顯示字型的設計詳細數據和視覺範例。 有些顯示字型變化的大小和粗細,例如 Semilight 或 Light,會編碼成其外觀。
所有顯示字型的實作代碼段都可以在格式設定(縮放/粗體)參考中找到。
375% 環境字型 + 淺色
使用方式 | 外觀 |
---|---|
使用方式: 罕見。 僅限獨一無二的品牌UI。 建議: - 使用句子大小寫 - 一律使用輕量 請勿這麼做: - 用於簽章 UI 以外的 UI,例如起始頁 - 粗體、斜體或粗體斜體 - 用於本文 - 在工具視窗中使用 |
顯示為: 34 pt Segoe UI 淺色 視覺範例: 目前未使用。 可用於Visual Studio 2017起始頁。 |
310% 環境字型 + 淺色
使用方式 | 外觀 |
---|---|
使用方式: - 簽章對話框中較大的標題 - 主要報表標題 建議: - 使用句子大小寫 - 一律使用輕量 請勿這麼做: - 用於簽章 UI 以外的 UI - 粗體、斜體或粗體斜體 - 用於本文 - 在工具視窗中使用 |
顯示為: 28 pt Segoe UI 淺色 視覺範例: ![]() |
200% 環境字型 + 半光
使用方式 | 外觀 |
---|---|
使用方式: -副標題 - 中小型對話框中的標題 建議: - 使用句子大小寫 - 一律使用 Semilight 重量 請勿這麼做: - 粗體、斜體或粗體斜體 - 用於本文 - 在工具視窗中使用 |
顯示為: 18 pt Segoe UI Semillight 視覺範例: ![]() |
155% 環境字型
使用方式 | 外觀 |
---|---|
使用方式: - 檔案井 UI 中的區段標題 - 報告 Do: 使用句子大小寫 請勿這麼做: - 粗體、斜體或粗體斜體 - 用於本文 - 在標準 Visual Studio 控制件中使用 - 在工具視窗中使用 |
顯示為: 14 pt Segoe UI 視覺範例: ![]() |
133% 環境字型
使用方式 | 外觀 |
---|---|
使用方式: - 簽章對話框中較小的子標題 - 檔案井 UI 中的較小子標題 Do: 使用句子大小寫 請勿這麼做: - 粗體、斜體或粗體斜體 - 用於本文 - 在標準 Visual Studio 控制件中使用 - 在工具視窗中使用 |
顯示為: 12 pt Segoe UI 視覺範例: ![]() |
122% 環境字型
使用方式 | 外觀 |
---|---|
使用方式: - 簽章對話框中的區段標題 - 樹檢視中的頂端節點 - 垂直索引標籤瀏覽 Do: 使用句子大小寫 請勿這麼做: - 粗體、斜體或粗體斜體 - 用於本文 - 在標準 Visual Studio 控制件中使用 - 在工具視窗中使用 |
顯示為: 11 pt Segoe UI 視覺範例: ![]() |
環境字型 + 粗體
使用方式 | 外觀 |
---|---|
使用方式: - 簽章對話框中的捲標和子標題 - 報表中的捲標和子標題 - 檔案井 UI 中的標籤和子標題 建議: - 使用句子大小寫 - 使用粗體粗細 請勿這麼做: - 斜體或粗體斜體 - 用於本文 - 在標準 Visual Studio 控制件中使用 - 在工具視窗中使用 |
顯示為: 粗體 9 pt Segoe UI 視覺範例: ![]() |
環境字型
使用方式 | 外觀 |
---|---|
使用方式: 所有其他文字 Do: 使用句子大小寫 不要: 斜體或粗體斜體 |
顯示為: 9 pt Segoe UI 視覺範例: ![]() |
邊框間距和間距
標題需要周圍的空間來給予他們適當的強調。 此空間會根據點大小和標題附近的內容而有所不同,例如環境字型中的水平規則或文字行。
標題本身的理想填補應該是90%的大寫字元高度空間。 例如,28 pt Segoe UI 淺色標題的上限高度為 26 pt,邊框間距應約為 23 pt 或約 31 像素。
標題周圍的最小空間應該是大寫字元高度的 50%。 當標題伴隨著規則或其他緊身專案時,可能會使用較少的空間。
粗體環境字型文字應遵循預設行高間距和邊框間距。