Aracılığıyla paylaş


Visual Studio İçin Yazı Tipleri ve Biçimlendirme

Ortam yazı tipi

Visual Studio içindeki tüm yazı tiplerinin özelleştirme için kullanıcıya açık olması gerekir. Bu, öncelikle Araçlar Seçenekleri iletişim kutusundaki Yazı Tipleri ve Renkler sayfası aracılığıyla yapılır.> Yazı tipi ayarlarının üç ana kategorisi şunlardır:

  • Ortam yazı tipi - iletişim kutuları, menüler, araç pencereleri ve belge pencereleri de dahil olmak üzere tüm arabirim öğeleri için kullanılan IDE'nin birincil yazı tipi (tümleşik geliştirme ortamı). Varsayılan olarak, ortam yazı tipi Windows'un geçerli sürümlerinde 9 pt Segoe UI olarak görünen bir sistem yazı tipine bağlıdır. Tüm arabirim öğeleri için tek bir yazı tipi kullanmak, IDE genelinde tutarlı bir yazı tipi görünümü sağlamaya yardımcı olur.

  • Metin düzenleyicisi - Kodda ve diğer metin tabanlı düzenleyicilerde ortaya çıkarak öğeler, Araçlar > Seçenekleri'ndeki Metin Düzenleyicisi sayfasında özelleştirilebilir.

  • Belirli koleksiyonlar - Arabirim öğelerinin kullanıcı tarafından özelleştirilmesini sağlayan tasarımcı pencereleri, Araçlar > Seçenekleri'ndeki kendi ayarlar sayfasında tasarım yüzeyine özgü yazı tiplerini kullanıma sunabilir.

Düzenleyici yazı tipi özelleştirme ve yeniden boyutlandırma

Kullanıcılar genellikle düzenleyicideki metnin boyutunu ve/veya rengini genel kullanıcı arabiriminden bağımsız olarak tercihlerine göre büyütür veya yakınlaştırabilir. Ortam yazı tipi bir düzenleyici/tasarımcının içinde veya bir parçası olarak görünebilen öğelerde kullanıldığından, bu yazı tipi sınıflandırmalarından biri değiştirildiğinde beklenen davranışı not etmek önemlidir.

Düzenleyicide görünen ancak içeriğin parçası olmayan kullanıcı arabirimi öğeleri oluştururken, öğelerin öngörülebilir bir şekilde yeniden boyutlandırılması için metin yazı tipini değil ortam yazı tipini kullanmak önemlidir.

  1. Düzenleyicideki kod metni için, kod metni yazı tipi ayarıyla yeniden boyutlandırın ve düzenleyici metninin yakınlaştırma düzeyine yanıt verin.

  2. Arabirimin diğer tüm öğeleri ortam yazı tipi ayarına bağlı olmalı ve ortamdaki genel değişikliklere yanıt vermelidir. Bu adımlardan bazıları:

    • Bağlam menülerindeki metinler

    • Ampul menü metni, hızlı bulma düzenleyici bölmesi ve bölmeye gitme gibi düzenleyici süslemesindeki metin

    • Dosyalarda Bul veya Yeniden Düzenle gibi iletişim kutularındaki metni etiketleme

Ortam yazı tipine erişme

Yerel veya WinForms kodunda ortam yazı tipine hizmetten SID_SUIHostLocale arabirimi sorguladıktan sonra yöntemi IUIHostLocale::GetDialogFont çağrılarak erişilebilir.

Windows Presentation Foundation (WPF) için, iletişim penceresi sınıfınızı WPF'nin DialogWindowWindow sınıfı yerine kabuğun sınıfından türetin.

XAML'de kod şöyle görünür:

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

Arka planda kod:

internal partial class WebConfigModificationWindow : DialogWindow
{
}

(değerini MPF dll'sinin geçerli sürümüyle değiştirin Microsoft.VisualStudio.Shell.11.0 .)

İletişim kutusunu görüntülemek için, üzerinden sınıfında "ShowModal()" çağrısı yapın ShowDialog(). ShowModal() kabukta doğru kalıcı durumu ayarlar, iletişim kutusunun üst pencerede ortalandığından emin olur ve bu şekilde devam eder.

Kod aşağıdaki gibidir:

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

ShowModal bool döndürüyor mu? (null atanabilir Boole) ve DialogResultgerekirse kullanılabilir. İletişim kutusu Tamam ile kapatıldıysa dönüş değeri true olur.

bir iletişim kutusu olmayan ve kendi HwndSourceiçinde barındırılan bir WPF kullanıcı arabirimini görüntülemeniz gerekiyorsa( örneğin, açılan pencere veya Win32/WinForms üst penceresinin WPF alt penceresi) WPF öğesinin FontFamilyFontSize kök öğesini ayarlamanız gerekir. (Kabuk, ana penceredeki özellikleri ayarlar, ancak bir HWNDöğesinden sonra devralınmazlar). Kabuk, özelliklerin bağlanabileceği kaynaklar sağlar, örneğin:

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

Biçimlendirme (ölçeklendirme/kalınlaştırma) başvurusu

Bazı iletişim kutuları, belirli bir metnin kalın veya ortam yazı tipi dışında bir boyut olmasını gerektirir. Daha önce, ortam yazı tipinden büyük yazı tipleri "environment font +2" veya benzeri olarak kodlanıyordu. Sağlanan kod parçacıklarının kullanılması yüksek DPI monitörlerini destekler ve görüntüleme metninin her zaman doğru boyutta ve ağırlıkta (Light veya Semilight gibi) göründüğünden emin olur.

Not

Biçimlendirmeyi uygulamadan önce, Metin stilinde bulunan yönergeleri izlediğinize emin olun.**

Ortam yazı tipini ölçeklendirmek için TextBlock veya Label stilini belirtildiği gibi ayarlayın. Doğru şekilde kullanılan bu kod parçacıklarının her biri, uygun boyut ve ağırlık çeşitlemeleri de dahil olmak üzere doğru yazı tipini oluşturur.

Burada "vsui", ad alanına Microsoft.VisualStudio.Shellbir başvurudur:

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

%375 Ortam yazı tipi + Açık

Şu şekilde görünür: 34 pt Segoe UI Light

Kullanım alanı: (nadir) benzersiz markalı kullanıcı arabirimi

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın.

<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 Ortam yazı tipi + Açık

Şu şekilde görünür: 28 pt Segoe UI Light Use for: büyük imza iletişim kutusu başlıkları, raporlarda ana başlık

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın.

<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 Ortam yazı tipi + Yarı ışık

Şöyle görünür: 18 pt Segoe UI Yarı Işık Kullanımı: alt başlıklar, küçük ve orta iletişim kutularında başlıklar

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın:

<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 Ortam yazı tipi

Şu şekilde görünür: 14 pt Segoe UI Kullanımı: belge kutusu kullanıcı arabiriminde veya raporlarında bölüm başlıkları

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın:

<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 Ortam yazı tipi

Şu şekilde görünür: 12 pt Segoe UI Için kullanın: imza iletişim kutularında ve belge kutusu kullanıcı arabiriminde daha küçük alt başlıklar

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın:

<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 Ortam yazı tipi

Şu şekilde görünür: 11 nk Segoe UI Şunun için kullanın: imza iletişim kutularında bölüm başlıkları, ağaç görünümünde üst düğümler, dikey sekme gezintisi

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın:

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

Ortam yazı tipi + kalın

Şöyle görünür: kalın 9 nk Segoe KULLANıCı Arabirimi kullanımı: imza iletişim kutularında, raporlarda ve belge kutusu kullanıcı arabiriminde etiketler ve alt başlıklar

Yordam kodu: Burada textBlock daha önce tanımlanmış bir TextBlock ve label önceden tanımlanmış bir Etikettir:

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

XAML: TextBlock veya Label stilini gösterildiği gibi ayarlayın:

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

Yerelleştirilebilir stiller

Bazı durumlarda, yerelleştiricilerin Doğu Asya dilleri için metinden kalın yazıyı kaldırma gibi farklı yerel ayarlar için yazı tipi stillerini değiştirmesi gerekir. Yazı tipi stillerinin yerelleştirilmesini mümkün kılmak için bu stillerin .resx dosyasında olması gerekir. Visual Studio form tasarımcısında bunu gerçekleştirmenin ve yazı tipi stillerini düzenlemenin en iyi yolu, yazı tipi stillerini tasarım zamanında açıkça ayarlamaktır. Bu tam bir yazı tipi nesnesi oluştursa ve üst yazı tiplerinin devralma işlemini bozmuş gibi görünse de, yazı tipini ayarlamak için yalnızca FontStyle özelliği kullanılır.

Çözüm, iletişim formunun olayını bağlamaktır FontChanged . Olayda FontChanged , tüm denetimleri gözden geçirin ve yazı tiplerinin ayarlanıp ayarlanmadığını denetleyin. Ayarlandıysa, formun yazı tipine ve denetimin önceki yazı tipi stiline göre yeni bir yazı tipiyle değiştirin. Kodda buna bir örnek:

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

Bu kodun kullanılması, formun yazı tipi güncelleştirildiğinde denetimlerin yazı tiplerinin de güncelleştirileceğini garanti eder. İletişim kutusu örneğini alamadığı ve olay hiçbir zaman tetiklenmeyebileceği için bu yöntem formun IUIServiceFontChanged oluşturucusundan da çağrılmalıdır. FontChanged Bağlama, iletişim kutusu zaten açık olsa bile iletişim kutularının yeni yazı tipini dinamik olarak almasına olanak sağlar.

Ortam yazı tipini test etme

Kullanıcı arabiriminizin ortam yazı tipini kullandığından ve boyut ayarlarına uydığından emin olmak için Araçlar > Seçenekleri > Ortam > Yazı Tipleri ve Renkleri'ni açın ve "Ayarları göster:" açılan menüsünden "Ortam Yazı Tipi" seçeneğini belirleyin.

Fonts and Colors settings in the Tools > Options dialog
Araçlar > Seçenekleri iletişim kutusundaki Yazı Tipleri ve Renkler ayarları

Yazı tipini varsayılandan çok farklı bir değere ayarlayın. Hangi kullanıcı arabiriminin güncelleştirilmediğini açıkça belli etmek için, serif içeren bir yazı tipi seçin ("Times New Roman" gibi) ve çok büyük bir boyut ayarlayın. Ardından, ortama uygun olduğundan emin olmak için kullanıcı arabiriminizi test edin. Lisans iletişim kutusunu kullanan bir örnek aşağıda verilmiştir:

Example of UI text that does not respect the environment font
Ortam yazı tipine saygı duymayan kullanıcı arabirimi metni örneği

Bu durumda, "Kullanıcı Bilgileri" ve "Ürün Bilgileri" yazı tipine saygı duymuyor. Bazı durumlarda bu açık bir tasarım seçimi olabilir, ancak açık yazı tipi kırmızı çizgi belirtimlerinin bir parçası olarak belirtilmezse bir hata olabilir.

Yazı tipini sıfırlamak için, Araçlar > Seçenekleri > Ortam > Yazı Tipleri ve Renkleri'nin altında "Varsayılanları Kullan" seçeneğine tıklayın.

Metin stili

Metin stili yazı tipi boyutu, kalınlığı ve büyük/küçük harfe başvurur. Uygulama kılavuzu için bkz . Ortam yazı tipi.

Metin büyük/küçük harf

Tüm büyük harfler

Visual Studio'da başlıklar veya etiketler için tüm büyük harf kullanmayın.

Tümü küçük harf

Visual Studio'da başlıklar veya etiketler için tüm küçük harfleri kullanmayın.

Tümce ve başlık büyük/küçük harf

Visual Studio'daki metin, duruma bağlı olarak başlık büyük/küçük harf veya tümce büyük/küçük harf kullanmalıdır.

Aşağıdakiler için başlık büyük/küçük harf kullanın: Aşağıdakiler için tümce büyük/küçük harf kullanın:
İletişim kutusu başlıkları Etiketler
Grup kutuları Onay kutuları
Menü öğeleri Radyo düğmeleri
Bağlam menüsü öğeleri Liste kutusu öğeleri
Düğmeler Durum çubukları
Tablo etiketleri
Sütun üst bilgileri
Araç ipuçları
Başlık büyük/küçük harf

Başlık büyük/küçük harf, tümcecik içindeki sözcüklerin çoğunun veya tümünün ilk harflerinin büyük harfle yazıldığı bir stildir. Visual Studio'da başlık büyük/küçük harf, aşağıdakiler de dahil olmak üzere birçok öğe için kullanılır:

  • Tooltips. Örnek: "Seçili Öğeleri Önizleme"

  • Sütun üst bilgileri. Örnek: "Sistem Yanıtı"

  • Menü öğeleri. Örnek: "Tümünü Kaydet"

    Başlık büyük/küçük harf kullanılırken, sözcüklerin ne zaman büyük harfle yazılıp ne zaman küçük harfle bırakılıp bırakılacasına ilişkin yönergeler şunlardır:

Büyük harfe Açıklamalar ve örnekler
Tüm adlar
Tüm fiiller "Is" ve diğer "olmak" biçimlerini dahil etme
Tüm saldırganlar "Than" ve "When" dahil
Tüm sıfatlar "This" ve "That" dahil
Tüm zamerler Sahiplik "Its" ve "It", prononun "it" ve "is" fiilinin daralması dahil
Konuşmanın bazı bölümlerine bakılmaksızın ilk ve son sözcükler
Bir fiil tümceciğinin parçası olan edatlar "Tüm Pencereleri Kapatma" veya "Sistemi Kapatma"
Bir kısaltmanın tüm harfleri HTML, XML, URL, IDE, RGB
Bir isim veya uygun bir sıfatsa veya sözcükler eşit ağırlığa sahipse bileşik sözcükteki ikinci sözcük Çapraz Başvuru, Microsoft Öncesi Yazılım, Okuma/Yazma Erişimi, Çalışma Zamanı
Küçük harf Örnekler
Bileşik sözcükteki ikinci sözcük, konuşmanın başka bir parçasıysa veya ilk sözcüğü değiştiren bir parçacıysa Nasıl Yapılır, Kalkış
Başlıktaki ilk sözcük değilse makaleler a, an,
Eşgüdümlü bağlantılar ve, ama, ne için, ne de veya
Fiil tümceciği dışında dört veya daha az harf içeren edatlar içine, üzerine, as for, out, on top
Sonsuz tümcecikte kullanıldığında "To" "Sabit Diskinizi Biçimlendirme"
Tümce büyük/küçük harf

Tümce büyük/küçük harf, tümcenin yalnızca ilk sözcüğünün büyük harfle yazıldığı ve uygun isimlerin ve "I" zamirinin bulunduğu standart büyük harfe çevirme yöntemidir. Genel olarak, özellikle de içerik bir makine tarafından çevrilecekse, dünya çapındaki izleyicilerin cümle durumunu okuması daha kolaydır. Aşağıdakiler için tümce büyük/küçük harf kullanın:

  1. Durum çubuğu iletileri. Bunlar basit, kısadır ve yalnızca durum bilgilerini sağlar. Örnek: "Proje dosyası yükleniyor"

  2. Etiketler, onay kutuları, radyo düğmeleri ve liste kutusu öğeleri de dahil olmak üzere diğer tüm kullanıcı arabirimi öğeleri. Örnek: "Listedeki tüm öğeleri seçin"

Metin biçimlendirme

Visual Studio 2013'teki varsayılan metin biçimlendirmesi Ortam yazı tipi tarafından denetlenmektedir. Bu hizmet, IDE (tümleşik geliştirme ortamı) genelinde tutarlı bir yazı tipi görünümü sağlamaya yardımcı olur ve kullanıcılarınız için tutarlı bir deneyim sağlamak için bunu kullanmanız gerekir.

Visual Studio yazı tipi hizmeti tarafından kullanılan varsayılan boyut Windows'tan gelir ve 9 nk olarak görünür.

Ortam yazı tipine biçimlendirme uygulayabilirsiniz. Bu konu başlığı altında stillerin nasıl ve nerede kullanılacağı anlatılmaktadır. Uygulama bilgileri için Bkz . Ortam yazı tipi.

Kalın metin

Kalın metin Visual Studio'da tedbirli bir şekilde kullanılır ve bunlar için ayrılmalıdır:

  • sihirbazlardaki soru etiketleri

  • Çözüm Gezgini'de etkin projeyi belirleme

  • Özellikler araç penceresinde değerleri geçersiz kılma

  • Visual Basic düzenleyicisi açılan listelerindeki bazı olaylar

  • web sayfaları için belge ana hattında sunucu tarafından oluşturulan içerik

  • karmaşık iletişim kutusunda veya tasarımcı kullanıcı arabiriminde bölüm üst bilgileri

İtalik

Visual Studio italik veya kalın italik metin kullanmaz.

Color

  • Mavi, köprüler (gezinti ve komut) için ayrılmıştır ve yönlendirme için hiçbir zaman kullanılmamalıdır.

  • Büyük başlıklar (ortam yazı tipi x %155 veya üzeri) şu amaçlarla renklendirilebilir:

    • İmza Visual Studio kullanıcı arabirimine görsel çekicilik sağlamak için

    • Belirli bir alana dikkat çekmek için

    • Standart koyu gri/siyah ortam metin renginden rahatlama sağlamak için

  • Başlıklardaki renk, başta ana mor #FF68217A olmak üzere mevcut Visual Studio marka renklerinden yararlanmalıdır.

  • Başlıklarda renk kullanırken, karşıtlık oranı ve diğer erişilebilirlik konuları da dahil olmak üzere Windows renk yönergelerine uymanız gerekir.

Yazı tipi boyutu

Visual Studio kullanıcı arabirimi tasarımı, daha fazla boşlukla daha açık bir görünüme sahiptir. Mümkün olduğunda, krom ve başlık çubukları azaltılmış veya kaldırılmıştır. Visual Studio'da bilgi yoğunluğu bir gereksinim olsa da, tipografi daha açık satır aralığına ve yazı tipi boyutlarının ve ağırlıklarının çeşitlemesi üzerinde durarak önemli olmaya devam eder.

Aşağıdaki tablolar, Visual Studio'da kullanılan görüntü yazı tipleri için tasarım ayrıntılarını ve görsel örnekleri içerir. Bazı görüntü yazı tipi varyasyonları, semilight veya Light gibi hem boyuta hem de ağırlığa sahiptir ve bunların görünümüne kodlanmıştır.

Tüm görüntü yazı tipleri için uygulama kodu parçacıkları Biçimlendirme (ölçeklendirme/kalınlaştırma) başvurusunda bulunabilir.

%375 Ortam yazı tipi + Açık

Kullanım Görünüm
Kullanım: Nadir. Yalnızca benzersiz markalı kullanıcı arabirimi.

Yap:

- Tümce büyük/küçük harf kullanma
- Her zaman Hafif kullanın

Yapma:

- Başlangıç Sayfası gibi imza kullanıcı arabirimi dışında kullanıcı arabirimi için kullanın
- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Araç pencerelerinde kullanma
Şu şekilde görünür: 34 pt Segoe UI Light

Görsel örnek:

Şu anda kullanılmıyor. Visual Studio 2017 Başlangıç Sayfasında kullanılabilir.

%310 Ortam yazı tipi + Açık

Kullanım Görünüm
Kullanım:

- İmza iletişim kutularındaki daha büyük başlık
- Ana rapor başlığı

Yap:

- Tümce büyük/küçük harf kullanma
- Her zaman Hafif kullanın

Yapma:

- İmza kullanıcı arabirimi dışında kullanıcı arabirimi için kullanın
- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Araç pencerelerinde kullanma
Şu şekilde görünür: 28 pt Segoe UI Light

Görsel örnek:

Example of 310% Environment font + Light heading

%200 Ortam yazı tipi + Yarı ışık

Kullanım Görünüm
Kullanım:

- Alt Başlıklar
- Küçük ve orta iletişim kutularındaki başlıklar

Yap:

- Tümce büyük/küçük harf kullanma
- Her zaman Semilight ağırlığı kullanın

Yapma:

- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Araç pencerelerinde kullanma
Şu şekilde görünür: 18 pt Segoe UI Semillight

Görsel örnek:

Example of 200% Environment font + Semilight

%155 Ortam yazı tipi

Kullanım Görünüm
Kullanım:

- Belge kutusu kullanıcı arabirimindeki bölüm başlıkları
-Rapor

Do: Tümce büyük/küçük harf kullanma

Yapma:

- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Standart Visual Studio denetimlerinde kullanma
- Araç pencerelerinde kullanma
Şu şekilde görünür: 14 pt Segoe kullanıcı arabirimi

Görsel örnek:

Example of 155% Environment font heading

%133 Ortam yazı tipi

Kullanım Görünüm
Kullanım:

- İmza iletişim kutularındaki daha küçük alt başlıklar
- Belge iyi kullanıcı arabiriminde daha küçük alt başlıklar

Do: Tümce büyük/küçük harf kullanma

Yapma:

- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Standart Visual Studio denetimlerinde kullanma
- Araç pencerelerinde kullanma
Şu şekilde görünür: 12 pt Segoe kullanıcı arabirimi

Görsel örnek:

Example of 133% Environment font heading

%122 Ortam yazı tipi

Kullanım Görünüm
Kullanım:

- İmza iletişim kutularındaki bölüm başlıkları
- Ağaç görünümünde üst düğümler
- Dikey sekme gezintisi

Do: Tümce büyük/küçük harf kullanma

Yapma:

- Kalın, italik veya kalın italik
- Gövde metni için kullanın
- Standart Visual Studio denetimlerinde kullanma
- Araç pencerelerinde kullanma
Şu şekilde görünür: 11 pt Segoe kullanıcı arabirimi

Görsel örnek:

Example of 122% Environment font heading

Ortam yazı tipi + kalın

Kullanım Görünüm
Kullanım:

- İmza iletişim kutularındaki etiketler ve alt başlıklar
- Raporlarda etiketler ve alt başlıklar
- Belge iyi kullanıcı arabirimindeki etiketler ve alt başlıklar

Yap:

- Tümce büyük/küçük harf kullanma
- Kalın kalınlık kullan

Yapma:

- İtalik veya kalın italik
- Gövde metni için kullanın
- Standart Visual Studio denetimlerinde kullanma
- Araç pencerelerinde kullanma
Şöyle görünür: kalın 9 pt Segoe kullanıcı arabirimi

Görsel örnek:

Example of Environment font + Bold heading

Ortam yazı tipi

Kullanım Görünüm
Kullanım: Diğer tüm metinler

Do: Tümce büyük/küçük harf kullanma

Yapma: İtalik veya kalın italik
Şu şekilde görünür: 9 pt Segoe UI

Görsel örnek:

Example of Environment font

Doldurma ve aralık

Başlıklar, uygun vurguyu vermek için bunların çevresinde boşluk olmasını gerektirir. Bu boşluk, nokta boyutuna ve yatay kural veya ortam yazı tipindeki metin satırı gibi başlığın yakınında başka ne olduğuna bağlı olarak değişir.

  • Başlık için tek başına ideal doldurma, büyük karakter yükseklik alanının %90'ını içermelidir. Örneğin, 28 nk Segoe UI Light başlığı 26 pt cap yüksekliğine sahiptir ve doldurma yaklaşık 23 nk veya yaklaşık 31 piksel olmalıdır.

  • Başlığın etrafındaki en küçük boşluk, büyük karakter yüksekliğinin %50'sinde olmalıdır. Bir başlığa bir kural veya diğer sıkı uyum elemanı eşlik ettiğinde daha az alan kullanılabilir.

  • Kalın ortam yazı tipi metni varsayılan satır yüksekliği aralığını ve doldurmayı izlemelidir.

Ayrıca bkz.