Schriftarten und Formatierung für Visual Studio

Die Umgebungsschriftart

Alle Schriftarten in Visual Studio müssen dem Benutzer zur Anpassung verfügbar gemacht werden. Dies erfolgt in erster Linie über die Seite "Schriftarten und Farben " im Dialogfeld "Extras > " . Die drei Standard Kategorien von Schriftarteinstellungen sind:

  • Umgebungsschriftart – die primäre Schriftart für die IDE (integrierte Entwicklungsumgebung), die für alle Schnittstellenelemente verwendet wird, einschließlich Dialogfeldern, Menüs, Toolfenstern und Dokumentfenstern. Standardmäßig ist die Umgebungsschriftart an eine Systemschriftart gebunden, die in den aktuellen Versionen von Windows als 9 Pt. Segoe UI angezeigt wird. Die Verwendung einer Schriftart für alle Schnittstellenelemente trägt dazu bei, ein einheitliches Erscheinungsbild der Schriftart in der gesamten IDE sicherzustellen.

  • Text-Editor – Elemente, die in Code und anderen textbasierten Editoren angezeigt werden, können auf der Seite "Text-Editor" in den Tools-Optionen >angepasst werden.

  • Bestimmte Sammlungen – Designerfenster, die Benutzeranpassungen ihrer Benutzeroberflächenelemente bieten, können Schriftarten, die für ihre Entwurfsoberfläche spezifisch sind, auf ihrer eigenen Einstellungsseite in den Tools-Optionen >verfügbar machen.

Anpassung der Editorschriftart und Größenänderung

Benutzer vergrößern oder zoomen häufig die Größe und/oder Farbe von Text im Editor entsprechend ihrer Vorliebe, unabhängig von der allgemeinen Benutzeroberfläche. Da die Umgebungsschriftart für Elemente verwendet wird, die innerhalb oder als Teil eines Editors/Designers angezeigt werden können, ist es wichtig, das erwartete Verhalten zu beachten, wenn eine dieser Schriftartklassifizierungen geändert wird.

Beim Erstellen von UI-Elementen, die im Editor angezeigt werden, aber nicht Teil des Inhalts sind, ist es wichtig, die Schriftart der Umgebung und nicht die Textschriftart zu verwenden, damit die Größe von Elementen vorhersehbar geändert wird.

  1. Ändern Sie die Größe von Codetext im Editor mit der Einstellung der Codetextschriftart, und reagieren Sie auf den Zoomfaktor des Editortexts.

  2. Alle anderen Elemente der Schnittstelle sollten an die Einstellung der Umgebungsschriftart gebunden sein und auf globale Änderungen in der Umgebung reagieren. Dies umfasst u. a.:

    • Text in Kontextmenüs

    • Text in einem Editor-Zierformat, z. B. Glühbirnenmenütext, Schnellsuche-Editorbereich und Navigieren zum Bereich

    • Beschriftungstext in Dialogfeldern, z . B. "In Dateien suchen" oder "Umgestalten"

Zugreifen auf die Umgebungsschriftart

Im systemeigenen oder WinForms-Code kann auf die Umgebungsschriftart zugegriffen werden, indem sie die Methode IUIHostLocale::GetDialogFont nach der Abfrage der Schnittstelle vom SID_SUIHostLocale Dienst aufruft.

Leiten Sie für Windows Presentation Foundation (WPF) Ihre Dialogfensterklasse von der Shellklasse DialogWindow anstelle der WPF-Klasse Window ab.

In XAML sieht der Code wie folgt aus:

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

CodeBehind:

internal partial class WebConfigModificationWindow : DialogWindow
{
}

(Ersetzen Sie durch Microsoft.VisualStudio.Shell.11.0 die aktuelle Version der MPF-DLL.)

Um das Dialogfeld anzuzeigen, rufen Sie "ShowModal()" für die Klasse über ShowDialog(). ShowModal() legt den richtigen modalen Zustand in der Shell fest, stellt sicher, dass das Dialogfeld im übergeordneten Fenster zentriert ist usw.

Der Code lautet wie folgt:

MyWindow window = new MyWindow();
window.ShowModal()

ShowModal gibt einen Bool zurück? (nullable Boolean) mit dem DialogResult, der bei Bedarf verwendet werden kann. Der Rückgabewert ist true, wenn das Dialogfeld mit OK geschlossen wurde.

Wenn Sie eine WPF-Benutzeroberfläche anzeigen müssen, die kein Dialogfeld ist und in einem eigenen HwndSourceFenster gehostet wird, z. B. ein Popupfenster oder ein untergeordnetes WPF-Fenster eines übergeordneten Win32/WinForms-Fensters, müssen Sie das FontFamilyFontSize Stammelement des WPF-Elements festlegen. (Die Shell legt die Eigenschaften für das Standard Fenster fest, aber sie werden nicht über ein HWND) geerbt. Die Shell stellt Ressourcen bereit, an die die Eigenschaften gebunden werden können, wie folgt:

<Setter Property="FontFamily" Value="{DynamicResource VsFont.EnvironmentFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource VsFont.EnvironmentFontSize}" />

Formatierungsreferenz (Skalierung/Fettformatierung)

Bei einigen Dialogfeldern muss ein bestimmter Text fett formatiert oder eine andere Größe als die Schriftart der Umgebung sein. Bisher wurden Schriftarten, die größer als die Umgebungsschriftart sind, als "environment font +2" oder ähnlich codiert. Die Verwendung der bereitgestellten Codeausschnitte unterstützt Monitore mit hohem DPI-Wert und stellt sicher, dass der Anzeigetext immer in der richtigen Größe und Stärke (z. B. Hell oder Semilight) angezeigt wird.

Hinweis

Bevor Sie die Formatierung anwenden, stellen Sie sicher, dass Sie den Anweisungen im Textformat folgen.**

Um die Schriftart der Umgebung zu skalieren, legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie angegeben fest. Jeder dieser Codeausschnitte, die ordnungsgemäß verwendet werden, generiert die richtige Schriftart, einschließlich der entsprechenden Größen- und Gewichtsvariationen.

Dabei ist "vsui" ein Verweis auf den Namespace Microsoft.VisualStudio.Shell:

xmlns:vsui="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.14.0"

375 % Umgebungsschriftart + Hell

Wird angezeigt als: 34 Pt. Segoe UI Light

Verwendung für: (seltene) eindeutige Branding-UI

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment375PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment375PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie dargestellt fest.

<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 % Umgebungsschriftart + Hell

Wird angezeigt als: 28 Pt. Segoe UI Light Use for: large signature dialog titles, Standard heading in reports

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment310PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment310PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie dargestellt fest.

<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 % Umgebungsschriftart + Semilight

Wird angezeigt als: 18 Pt. Segoe UI Semilight Verwendung für: Unterüberschriften, Titel in kleinen und mittleren Dialogfeldern

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment200PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment200PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie gezeigt fest:

<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 % Umgebungsschriftart

Wird angezeigt als: 14 pt Segoe UI Use for: Section headings in document well UI or reports

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment155PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment155PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie gezeigt fest:

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

Schriftart "133% Umgebung"

Wird angezeigt als: 12 Pt. Segoe UI Verwendung für: kleinere Unterüberschriften in Signaturdialogfeldern und Dokumentbenutzeroberfläche

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment133PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment133PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie gezeigt fest:

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

Schriftart "122% Umgebung"

Wird angezeigt als: 11 Pt. Segoe UI Verwendung für: Abschnittsüberschriften in Signaturdialogfeldern, obere Knoten in der Strukturansicht, vertikale Registerkartennavigation

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironment122PercentFontSizeStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironment122PercentFontSizeStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie gezeigt fest:

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

Umgebungsschriftart + Fettdruck

Erscheint als: fett formatierte Segoe UI-Verwendung für: Bezeichnungen und Unterüberschriften in Signaturdialogfeldern, Berichten und Dokumentbenutzeroberfläche

Prozeduraler Code: Dabei textBlock handelt es sich um einen zuvor definierten TextBlock und label eine zuvor definierte Bezeichnung:

textBlock.SetResourceReference(TextBlock.StyleProperty,  
        VsResourceKeys.TextBlockEnvironmentBoldStyleKey); 
label.SetResourceReference(Label.StyleProperty,  
        VsResourceKeys.LabelEnvironmentBoldStyleKey);

XAML: Legen Sie die Formatvorlage des TextBlocks oder der Beschriftung wie gezeigt fest:

<TextBlock Style="{DynamicResource {x:Static vsui:VsResourceKeys.TextBlockEnvironmentBoldStyleKey}}"> Bold TextBlock</TextBlock> 
<Label Style="{DynamicResource {x:Static vsui:VsResourceKeys.LabelEnvironmentBoldStyleKey}}"> Bold Label</Label>

Lokalisierbare Formatvorlagen

In einigen Fällen müssen Lokalisierer Schriftarten für verschiedene Gebietsschemas ändern, z. B. das Entfernen von Fettformatierungen aus Text für ostasiatische Sprachen. Damit die Lokalisierung von Schriftschnitten möglich ist, müssen sich diese Formatvorlagen in der RESX-Datei befinden. Die beste Möglichkeit, dies zu erreichen und weiterhin Schriftarten im Visual Studio-Formular-Designer zu bearbeiten, besteht darin, die Schriftformate zur Entwurfszeit explizit festzulegen. Obwohl dadurch ein vollständiges Schriftartobjekt erstellt wird und die Vererbung übergeordneter Schriftarten möglicherweise unterbrochen wird, wird nur die FontStyle-Eigenschaft verwendet, um die Schriftart festzulegen.

Die Lösung besteht darin, das Ereignis des Dialogfeldformulars FontChanged zu verbinden. Führen Sie im FontChanged Ereignis alle Steuerelemente durch, und überprüfen Sie, ob ihre Schriftart festgelegt ist. Wenn sie festgelegt ist, ändern Sie sie auf der Grundlage der Schriftart des Formulars und des vorherigen Schriftschnitts des Steuerelements in eine neue Schriftart. Ein Beispiel hierfür im Code ist:

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);
          }
     }
}

Durch die Verwendung dieses Codes wird sichergestellt, dass auch die Schriftarten der Steuerelemente aktualisiert werden, wenn die Schriftart des Formulars aktualisiert wird. Diese Methode sollte auch vom Konstruktor des Formulars aufgerufen werden, da das Dialogfeld möglicherweise keine Instanz abrufen IUIService kann und das FontChanged Ereignis nie ausgelöst wird. Durch das Hooking FontChanged können Dialogfelder die neue Schriftart dynamisch aufnehmen, auch wenn das Dialogfeld bereits geöffnet ist.

Testen der Umgebungsschriftart

Um sicherzustellen, dass Ihre Benutzeroberfläche die Schriftart der Umgebung verwendet und die Größeneinstellungen berücksichtigt, öffnen Sie "Extras > Optionen > Umgebungsschriftarten > und Farben ", und wählen Sie im Dropdownmenü "Einstellungen anzeigen für:" die Option "Schriftart der Umgebung" aus.

Fonts and Colors settings in the Tools > Options dialog
Einstellungen für Schriftarten und Farben im Dialogfeld 'Extras > '

Legen Sie die Schriftart auf etwas anderes als die Standardeinstellung fest. Um es offensichtlich zu machen, welche UI nicht aktualisiert wird, wählen Sie eine Schriftart mit Serifen (wie "Times New Roman") aus, und legen Sie eine sehr große Größe fest. Testen Sie dann Die Benutzeroberfläche, um sicherzustellen, dass sie die Umgebung respektiert. Hier ist ein Beispiel für die Verwendung des Lizenzdialogfelds:

Example of UI text that does not respect the environment font
Beispiel für UI-Text, der die Schriftart der Umgebung nicht berücksichtigt

In diesem Fall respektieren "Benutzerinformationen" und "Produktinformationen" die Schriftart nicht. In einigen Fällen kann dies eine explizite Entwurfsauswahl sein, kann aber ein Fehler sein, wenn die explizite Schriftart nicht als Teil der Redline-Spezifikationen angegeben wird.

Um die Schriftart zurückzusetzen, klicken Sie unter "Extras > Options > Environment > Fonts and Colors" auf "Standardwerte verwenden".

Textstil

Textformat bezieht sich auf Schriftgrad, Stärke und Groß-/Kleinschreibung. Implementierungsanleitungen finden Sie unter "Schriftart der Umgebung".

Groß-/Kleinschreibung von Text

Großbuchstaben

Verwenden Sie nicht alle Großbuchstaben für Titel oder Beschriftungen in Visual Studio.

Alles klein geschrieben

Verwenden Sie nicht alle Kleinbuchstaben für Titel oder Beschriftungen in Visual Studio.

Satz- und Titelbuchstaben

Text in Visual Studio sollte in Abhängigkeit von der Situation entweder die Groß-/Kleinschreibung des Titels oder des Satzbuchstabens verwenden.

Verwenden Sie den Titelfall für: Verwenden Sie die Groß-/Kleinschreibung von Sätzen für:
Dialogfeldtitel Beschriftungen
Gruppieren von Feldern Kontrollkästchen
Menüelemente Optionsfelder
Kontextmenüelemente Listenfeldelemente
Schaltflächen Statusleisten
Tabellenbeschriftungen
Spaltenüberschriften
Quickinfos
Titel-Groß-/Kleinschreibung

Bei der Titelschreibung handelt es sich um eine Formatvorlage, in der die ersten Buchstaben der meisten oder aller Wörter in einem Ausdruck groß geschrieben werden. In Visual Studio wird der Titelfall für viele Elemente verwendet, darunter:

  • Quickinfos. Beispiel: "Ausgewählte Elemente in der Vorschau anzeigen"

  • Spaltenüberschriften. Beispiel: "Systemantwort"

  • Menüelemente. Beispiel: "Alle speichern"

    Bei Verwendung des Titelbuchstabens sind dies die Richtlinien für die Großschreibung von Wörtern und deren Kleinschreibung:

Großbuchstaben Kommentare und Beispiele
Alle Substantive
Alle Verben Einschließen von "Ist" und anderen Formen von "zu sein"
Alle Adverbs Einschließen von "Than" und "Wann"
Alle Adjektive Einschließen von "This" und "That"
Alle Pronomen Einschließlich des Possessivs "Its" sowie "It's", eine Kontraktion des Pronomen "it" und des Verbs "is"
Erste und letzte Wörter, unabhängig von Wortteilen
Präpositionen, die Teil eines Verbausdrucks sind "Alle Windows schließen" oder "Herunterfahren des Systems"
Alle Buchstaben eines Akronym HTML, XML, URL, IDE, RGB
Das zweite Wort in einem zusammengesetzten Wort, wenn es sich um ein Substantiv oder ein richtiges Adjektiv handelt oder wenn die Wörter gleich groß sind Querverweis, Vor-Microsoft-Software, Lese-/Schreibzugriff, Laufzeit
Kleinbuchstaben Beispiele
Das zweite Wort in einem zusammengesetzten Wort, wenn es sich um einen anderen Teil der Sprache oder ein Partiziple handelt, das das erste Wort ändert How-to, Take-off
Artikel, es sei denn, eines ist das erste Wort im Titel a, an, the
Koordinaten-Konjunktionen und, aber für oder oder
Präpositionieren mit Wörtern von vier oder weniger Buchstaben außerhalb eines Verbausdrucks in, wie für, von, über
"An", wenn er in einem infinitiven Ausdruck verwendet wird "So formatieren Sie Ihre Festplatte"
Groß-/Kleinschreibung im Satz

Die Groß-/Kleinschreibung von Sätzen ist die Standard-Großschreibungsmethode zum Schreiben, in der nur das erste Wort des Satzes großgeschrieben wird, zusammen mit den richtigen Substantiven und dem Pronomen "I". Im Allgemeinen ist der Satzfall für ein weltweites Publikum einfacher zu lesen, insbesondere, wenn der Inhalt von einem Computer übersetzt wird. Verwenden Sie die Groß-/Kleinschreibung von Sätzen für:

  1. Statusleistenmeldungen. Diese sind einfach, kurz und stellen nur Statusinformationen bereit. Beispiel: "Projektdatei wird geladen"

  2. Alle anderen UI-Elemente, einschließlich Beschriftungen, Kontrollkästchen, Optionsfelder und Listenfeldelemente. Beispiel: "Alle Elemente in der Liste auswählen"

Textformatierung

Die Standardtextformatierung in Visual Studio 2013 wird durch die Schriftart der Umgebung gesteuert. Dieser Dienst trägt dazu bei, eine einheitliche Schriftartdarstellung in der gesamten IDE (integrierte Entwicklungsumgebung) sicherzustellen, und Sie müssen ihn verwenden, um eine konsistente Benutzererfahrung für Ihre Benutzer zu gewährleisten.

Die standardgröße, die vom Visual Studio-Schriftartdienst verwendet wird, stammt aus Windows und wird als 9 Pt. angezeigt.

Sie können die Formatierung auf die Schriftart der Umgebung anwenden. In diesem Thema wird erläutert, wie und wo Formatvorlagen verwendet werden. Informationen zur Implementierung finden Sie in der Schriftart der Umgebung.

Fett formatierter Text

Fett formatierter Text wird in Visual Studio sparsam verwendet und sollte für Folgendes reserviert werden:

  • Fragebeschriftungen in Assistenten

  • Entwerfen des aktiven Projekts in Projektmappen-Explorer

  • Außerkraftsetzung von Werten im Eigenschaftentoolfenster

  • Bestimmte Ereignisse in den Dropdownlisten des Visual Basic-Editors

  • Vom Server generierter Inhalt in der Dokumentgliederung für Webseiten

  • Abschnittsüberschriften in komplexen Dialogfeldern oder Designer-UI

Kursiv

Visual Studio verwendet weder kursiv noch fett formatierten Kursivtext.

Color

  • Blau ist für Links (Navigation und Befehle) reserviert und sollte niemals für die Ausrichtung verwendet werden.

  • Größere Überschriften (Umgebungsschriftart x 155 % oder höher) können für diese Zwecke farbig sein:

    • So stellen Sie visuellen Reiz für die Signatur der Visual Studio-Benutzeroberfläche bereit

    • So rufen Sie die Aufmerksamkeit auf einen bestimmten Bereich auf

    • So bieten Sie Erleichterungen aus der Standard-Textfarbe für dunkelgrau/schwarze Umgebung

  • Die Farbe in Überschriften sollte vorhandene Visual Studio-Markenfarben, in erster Linie die Standard Lila, #FF68217A nutzen.

  • Wenn Sie Farben in Überschriften verwenden, müssen Sie die Windows-Farbrichtlinien einhalten, einschließlich Kontrastverhältnis und anderen Überlegungen zur Barrierefreiheit.

Schriftgrad

Das Design der Visual Studio-Benutzeroberfläche bietet eine hellere Darstellung mit mehr Leerraum. Chrom- und Titelleisten wurden nach Möglichkeit reduziert oder entfernt. Während die Informationsdichte eine Anforderung in Visual Studio ist, ist die Typografie weiterhin wichtig, wobei der Schwerpunkt auf offeneren Zeilenabstand und einer Variation von Schriftgraden und -gewichtungen liegt.

Die folgenden Tabellen enthalten Entwurfsdetails und visuelle Beispiele für die in Visual Studio verwendeten Anzeigeschriftarten. Einige Anzeigeschriftartenvariationen weisen sowohl die Größe als auch die Stärke auf, z. B. Semilight oder Light, die in ihre Darstellung codiert sind.

Implementierungscodeausschnitte für alle Anzeigeschriftarten finden Sie in der Formatierungsreferenz (Skalierung/Fettformatierung).

375 % Umgebungsschriftart + Hell

Verbrauch Erscheinungsbild
Verwendung: Selten. Nur eindeutige Branding-UI.

Gehen Sie wie folgt vor:

- Groß-/Kleinschreibung des Satzes verwenden
- Immer leichtes Gewicht verwenden

Vermeiden Sie Folgendes:

– Verwendung für andere Ui-Elemente als Signatur-UI wie Startseite
- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
- Verwendung in Toolfenstern
Wird angezeigt als: 34 Pt. Segoe UI Light

Visuelles Beispiel:

Wird derzeit nicht verwendet. Kann auf der Visual Studio 2017-Startseite verwendet werden.

310 % Umgebungsschriftart + Hell

Verbrauch Erscheinungsbild
Syntax:

- Größere Überschrift in Signaturdialogfeldern
- Hauptberichtsüberschrift

Gehen Sie wie folgt vor:

- Groß-/Kleinschreibung des Satzes verwenden
- Immer leichtes Gewicht verwenden

Vermeiden Sie Folgendes:

– Verwendung für andere Ui-Elemente als signaturbenutzeroberfläche
- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
- Verwendung in Toolfenstern
Wird angezeigt als: 28 Pt. Segoe UI Light

Visuelles Beispiel:

Example of 310% Environment font + Light heading

200 % Umgebungsschriftart + Semilight

Verbrauch Erscheinungsbild
Syntax:

-Unterpositionen
- Titel in kleinen und mittleren Dialogfeldern

Gehen Sie wie folgt vor:

- Groß-/Kleinschreibung des Satzes verwenden
- Immer Semilight-Gewicht verwenden

Vermeiden Sie Folgendes:

- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
- Verwendung in Toolfenstern
Wird angezeigt als: 18 Pt. Segoe UI Semillight

Visuelles Beispiel:

Example of 200% Environment font + Semilight

155 % Umgebungsschriftart

Verbrauch Erscheinungsbild
Syntax:

- Abschnittsüberschriften in Dokumentbenutzeroberfläche
- Berichte

Do: Use sentence case

Vermeiden Sie Folgendes:

- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
– Verwenden in Standardmäßigen Visual Studio-Steuerelementen
- Verwendung in Toolfenstern
Wird angezeigt als: 14 Pt. Segoe UI

Visuelles Beispiel:

Example of 155% Environment font heading

Schriftart "133% Umgebung"

Verbrauch Erscheinungsbild
Syntax:

- Kleinere Unterüberschriften in Signaturdialogfeldern
- Kleinere Unterüberschriften in Dokumentbenutzeroberfläche

Do: Use sentence case

Vermeiden Sie Folgendes:

- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
– Verwenden in Standardmäßigen Visual Studio-Steuerelementen
- Verwendung in Toolfenstern
Wird angezeigt als: 12 Pt. Segoe UI

Visuelles Beispiel:

Example of 133% Environment font heading

Schriftart "122% Umgebung"

Verbrauch Erscheinungsbild
Syntax:

- Abschnittsüberschriften in Signaturdialogfeldern
- Obere Knoten in der Strukturansicht
- Vertikale Registerkartennavigation

Do: Use sentence case

Vermeiden Sie Folgendes:

- Fett, kursiv oder fett kursiv
- Verwendung für Textkörper
– Verwenden in Standardmäßigen Visual Studio-Steuerelementen
- Verwendung in Toolfenstern
Wird angezeigt als: 11 Pt. Segoe UI

Visuelles Beispiel:

Example of 122% Environment font heading

Umgebungsschriftart + Fettdruck

Verbrauch Erscheinungsbild
Syntax:

- Bezeichnungen und Unterüberschriften in Signaturdialogfeldern
- Bezeichnungen und Unterüberschriften in Berichten
- Bezeichnungen und Unterüberschriften in Dokumentbenutzeroberfläche

Gehen Sie wie folgt vor:

- Groß-/Kleinschreibung des Satzes verwenden
- Fettstärke verwenden

Vermeiden Sie Folgendes:

- Kursiv oder fett kursiv
- Verwendung für Textkörper
– Verwenden in Standardmäßigen Visual Studio-Steuerelementen
- Verwendung in Toolfenstern
Erscheint als: fett formatiert 9 Pt. Segoe UI

Visuelles Beispiel:

Example of Environment font + Bold heading

Umgebungsschriftart

Verbrauch Erscheinungsbild
Verwendung: Alle anderen Texte

Do: Use sentence case

Nicht: Kursiv oder fett kursiv
Wird angezeigt als: 9 Pt. Segoe UI

Visuelles Beispiel:

Example of Environment font

Abstand und Abstand

Überschriften erfordern Platz um sie herum, um ihnen den entsprechenden Schwerpunkt zu verleihen. Dieser Abstand variiert je nach Punktgröße und was sich sonst in der Nähe der Überschrift befindet, z. B. eine horizontale Regel oder eine Textzeile in der Schriftart der Umgebung.

  • Der ideale Abstand für eine Überschrift selbst sollte 90 % des Großbuchstabenhöhenbereichs betragen. Beispielsweise hat eine 28 Pt. Segoe UI Light-Überschrift eine Kapitälchenhöhe von 26 Pt. Und der Abstand sollte ungefähr 23 Pt. oder etwa 31 Pixel betragen.

  • Der minimale Abstand um eine Überschrift sollte 50 % der Höhe des Großbuchstabens betragen. Weniger Platz kann verwendet werden, wenn eine Überschrift von einer Regel oder einem anderen eng passenden Element begleitet wird.

  • Fett formatierter Schriftarttext sollte dem Standardzeilenabstand und -abstand entsprechen.

Siehe auch