共用方式為


適用於 Visual Studio 的字型和格式設定

環境字型

Visual Studio 中的所有字型都必須公開給用戶以進行自定義。 這主要是透過 [工具>選項] 對話方塊中的 [字型和色彩] 頁面來完成。 字型設定的三個主要類別如下:

  • 環境字型 - IDE 的主要字 型(集成開發環境),用於所有介面元素,包括對話框、功能表、工具視窗和文檔視窗。 根據預設,環境字型會系結至目前 Windows 版本中顯示為 9 pt Segoe UI 的系統字型。 針對所有介面元素使用一個字型有助於確保整個 IDE 的字型外觀一致。

  • 文字編輯器 - 可在 [工具>選項] 的 [文字編輯器] 頁面中自定義程式代碼和其他以文字為基礎的編輯器中呈現的專案。

  • 特定集合 - 提供使用者自定義介面元素的設計視窗,可能會在 [工具選項] 的 [ 工具 > 選項] 中,公開其設計介面專屬的字型。

編輯器字型自定義和重設大小

使用者通常會根據使用者的喜好設定,放大或縮放編輯器中文字的大小和/或色彩,與一般使用者介面無關。 由於環境字型用於可能出現在編輯器/設計工具內或做為編輯器/設計工具一部分的專案上,因此當其中一個字型分類變更時,請務必注意預期的行為。

建立出現在編輯器中但不屬於 內容的UI元素時,請務必使用環境字型,而不是文字字型,讓元素以可預測的方式重設大小。

  1. 針對編輯器中的程式碼文字,請使用程式碼文字字型設定重設大小,並響應編輯器文本的縮放層級。

  2. 介面的所有其他元素都應該系結至環境字型設定,並響應環境中的任何全域變更。 其中包括 (但不限於):

    • 操作功能表中的文字

    • 編輯器裝飾中的文字,例如燈泡菜單文字、快速尋找編輯器窗格,以及瀏覽至窗格

    • 對話框中的標籤文字,例如 [在檔案 中尋找] 或 [重構]

存取環境字型

在 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。

如果您需要顯示一些不是對話框且載入於自己的 HwndSourceWPF UI,例如 Win32/WinForms 父視窗的彈出視窗或 WPF 子視窗,則必須在 WPF 元素的根元素上設定 FontFamilyFontSize 。 (殼層會在主視窗上設定屬性,但不會繼承超過。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使用環境字型並遵守大小設定,請開啟 [工具 > 選項 > 環境 > 字型和色彩 ],然後在 [顯示設定為:] 下拉功能表底下選取 [環境字型]。

Fonts and Colors settings in the Tools > Options dialog
[工具 > 選項] 對話框中的字型和色彩設定

將字型設定為與預設值非常不同的字型。 為了讓 UI 無法更新,請選擇具有 Serifs 的字型(例如“時代新羅馬”),並設定非常大的大小。 然後測試您的UI,以確保它遵守環境。 以下是使用授權對話框的範例:

Example of UI text that does not respect the environment font
不符合環境字型的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”。一般而言,全球觀眾更容易閱讀句子案例,尤其是在計算機翻譯內容時。 針對下列專案使用句子案例:

  1. 狀態列訊息。 這些是簡單、簡短且僅提供狀態資訊。 範例:“載入項目檔”

  2. 所有其他 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 淺色

視覺範例:

Example of 310% Environment font + Light heading

200% 環境字型 + 半光

使用方式 外觀
使用方式:

-副標題
- 中小型對話框中的標題

建議:

- 使用句子大小寫
- 一律使用 Semilight 重量

請勿這麼做:

- 粗體、斜體或粗體斜體
- 用於本文
- 在工具視窗中使用
顯示為: 18 pt Segoe UI Semillight

視覺範例:

Example of 200% Environment font + Semilight

155% 環境字型

使用方式 外觀
使用方式:

- 檔案井 UI 中的區段標題
- 報告

Do: 使用句子大小寫

請勿這麼做:

- 粗體、斜體或粗體斜體
- 用於本文
- 在標準 Visual Studio 控制件中使用
- 在工具視窗中使用
顯示為: 14 pt Segoe UI

視覺範例:

Example of 155% Environment font heading

133% 環境字型

使用方式 外觀
使用方式:

- 簽章對話框中較小的子標題
- 檔案井 UI 中的較小子標題

Do: 使用句子大小寫

請勿這麼做:

- 粗體、斜體或粗體斜體
- 用於本文
- 在標準 Visual Studio 控制件中使用
- 在工具視窗中使用
顯示為: 12 pt Segoe UI

視覺範例:

Example of 133% Environment font heading

122% 環境字型

使用方式 外觀
使用方式:

- 簽章對話框中的區段標題
- 樹檢視中的頂端節點
- 垂直索引標籤瀏覽

Do: 使用句子大小寫

請勿這麼做:

- 粗體、斜體或粗體斜體
- 用於本文
- 在標準 Visual Studio 控制件中使用
- 在工具視窗中使用
顯示為: 11 pt Segoe UI

視覺範例:

Example of 122% Environment font heading

環境字型 + 粗體

使用方式 外觀
使用方式:

- 簽章對話框中的捲標和子標題
- 報表中的捲標和子標題
- 檔案井 UI 中的標籤和子標題

建議:

- 使用句子大小寫
- 使用粗體粗細

請勿這麼做:

- 斜體或粗體斜體
- 用於本文
- 在標準 Visual Studio 控制件中使用
- 在工具視窗中使用
顯示為: 粗體 9 pt Segoe UI

視覺範例:

Example of Environment font + Bold heading

環境字型

使用方式 外觀
使用方式: 所有其他文字

Do: 使用句子大小寫

不要: 斜體或粗體斜體
顯示為: 9 pt Segoe UI

視覺範例:

Example of Environment font

邊框間距和間距

標題需要周圍的空間來給予他們適當的強調。 此空間會根據點大小和標題附近的內容而有所不同,例如環境字型中的水平規則或文字行。

  • 標題本身的理想填補應該是90%的大寫字元高度空間。 例如,28 pt Segoe UI 淺色標題的上限高度為 26 pt,邊框間距應約為 23 pt 或約 31 像素。

  • 標題周圍的最小空間應該是大寫字元高度的 50%。 當標題伴隨著規則或其他緊身專案時,可能會使用較少的空間。

  • 粗體環境字型文字應遵循預設行高間距和邊框間距。

另請參閱