Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować się zalogować lub zmienić katalog.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Jako wizualna reprezentacja języka głównym zadaniem typografii jest komunikowanie informacji. System typów systemu Windows ułatwia tworzenie struktury i hierarchii w zawartości w celu zmaksymalizowania czytelności i czytelności w interfejsie użytkownika.
Zmienna interfejsu użytkownika Segoe to nowa czcionka systemowa dla systemu Windows. Jest to odświeżone spojrzenie na klasyczny Segoe i używa technologii czcionek zmiennej szerokości, aby dynamicznie zapewnić dużą czytelność w bardzo małych rozmiarach oraz ulepszone kontury w większych rozmiarach na ekranie.
Wskazówka
W tym artykule opisano sposób stosowania języka Fluent Design do aplikacji systemu Windows. Aby uzyskać więcej informacji, zobacz Fluent Design — Typografia.
Używanie zmiennej Segoe Fluent
Zmienna interfejsu użytkownika Segoe obsługuje dwie osie w celu precyzyjnej kontroli tekstu: wagi i rozmiaru optycznego.
- Oś wagi (
wght) jest przyrostowa z wagami od Cienka (100) do Pogrubiona (700). - Oś rozmiaru optycznego (
opsz) jest domyślnie automatyczna i włączona. Steruje kształtem i rozmiarem liczników w czcionce, aby priorytetem uczynić czytelność w małych rozmiarach i charakter w dużych rozmiarach (do optycznego skalowania od 8 do 36 pkt).
W przypadku używania typowych kontrolek XAML czcionka zmiennej interfejsu użytkownika Segoe zostanie domyślnie wybrana dla obsługiwanych języków. Gdy używana jest czcionka lub inna czcionka zmienna z osią optyczną, rozmiar optyczny będzie automatycznie dopasowany do żądanego rozmiaru czcionki. W przypadku korzystania z języka HTML skalowanie optyczne jest również automatyczne, ale należy określić czcionkę zmiennej interfejsu użytkownika Segoe w pliku CSS.
Wagi
| Nazwa wagi | Wartość osi wagi | Element wizualny |
|---|---|---|
| Światło | 300 |
|
| półlekki |
350 |
|
| Regularny | 400 |
|
| Semibold | 600 |
|
| Pogrubiony | 700 |
|
Oś optyczna
Najlepsze rozwiązania dotyczące typografii w systemie Windows 11
System Windows 11 używa zmiennej interfejsu użytkownika Segoe z następującymi atrybutami na podstawie kontekstu, w którym jest wyświetlany tekst.
| Atrybut | Wartość | Notatki |
|---|---|---|
| Waga | Regular, SemiBold | Użyj regularnej wagi dla większości tekstu, użyj semibold dla tytułów |
| Wyrównanie | Lewo, środek | Wyrównaj do lewej domyślnie, Wyrównaj do środka tylko w rzadkich przypadkach, takich jak tekst poniżej ikon |
| Wartości minimalne | 14px Półgruby, 12px Zwykły | Tekst mniejszy niż te rozmiary i wagi są nieczytelne w niektórych językach |
| Obudowa | Przypadek zdania (małą literą na początku zdania) | Używaj małych liter dla całego tekstu interfejsu użytkownika, w tym tytułów. |
| Obcinania | Wielokropek i wycinki | W większości należy używać wielokropków; cięcie jest stosowane tylko w rzadkich przypadkach |
Przykłady
Aplikacja z galerii
WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub
Typografia w aplikacjach systemu Windows
Jako wizualna reprezentacja języka głównym zadaniem typografii jest komunikowanie informacji. Jego styl nigdy nie powinien stanowić przeszkody dla osiągnięcia tego celu. W tym artykule omówimy, jak stylizować typografię w aplikacji w systemie Windows, aby pomóc użytkownikom w łatwym i efektywnym zrozumieniu treści.
Krój pisma
Należy użyć jednej czcionki w interfejsie użytkownika aplikacji i zalecamy trzymanie się domyślnej czcionki dla aplikacji systemu Windows, zmiennej interfejsu użytkownika Segoe. Zaprojektowano go tak, aby zachować optymalną czytelność w różnych rozmiarach i gęstości pikseli oraz oferuje czystą, lekką i otwartą estetykę, która uzupełnia zawartość systemu.
Aby wyświetlić języki inne niż angielski lub wybrać inną czcionkę dla aplikacji, zobacz Języki i czcionki dla naszych zalecanych czcionek dla aplikacji systemu Windows.
Rozmiar i skalowanie
Rozmiary czcionek w aplikacjach XAML są automatycznie skalowane na wszystkich urządzeniach. Algorytm skalowania gwarantuje, że czcionka 24 piksele na dużym ekranie oddalonym o 3 metry jest tak samo czytelna jak czcionka 24 piksele na małym ekranie, który znajduje się kilka cali od użytkownika.
Ze względu na sposób działania systemu skalowania projektujesz w efektywnych pikselach, a nie w rzeczywistych pikselach fizycznych i nie musisz zmieniać rozmiarów czcionek dla różnych rozmiarów ekranów lub rozdzielczości.
Hierarchia
Użytkownicy polegają na hierarchii wizualnej podczas skanowania strony: nagłówki podsumowują zawartość, a tekst treści zawiera więcej szczegółów. Aby utworzyć czystą hierarchię wizualizacji w aplikacji, postępuj zgodnie z rampą typu systemu Windows.
Rodzaj rampy
Rampa typu systemu Windows ustanawia kluczowe relacje między stylami typów na stronie, ułatwiając użytkownikom łatwe odczytywanie zawartości. Wszystkie rozmiary podane są w efektywnych pikselach i są zoptymalizowane pod kątem aplikacji systemu Windows działających na wszystkich rozmiarach ekranu.
System Windows 11 używa następujących wartości dla różnych typów tekstu w interfejsie użytkownika.
| Przykład | Ciężar | Rozmiar/wysokość linii |
|---|---|---|
|
Mały | 12/16 EPX |
|
Tekst | 14/20 epx |
|
Tekst półgruby | 14/20 epx |
|
Tekst | 18/24 EPX |
|
Wyświetlanie półgrubego | 20/28 epx |
|
Wyświetlanie półgrubego | 28/36 EPX |
|
Wyświetlanie półgrubego | 40/52 piksele |
|
Wyświetlanie półgrubego | 68/92 EPX |
Aby uzyskać więcej informacji, zapoznaj się ze wskazówkami dotyczącymi korzystania z rampy typu XAML .
Wyrównanie
Domyślna TextAlignment to Left, a w większości przypadków wyrównanie do lewej z niepełnym wyrównaniem do prawej zapewnia spójne zakotwiczenie zawartości i jednolity układ. W przypadku języków RTL zobacz Dostosowywanie układu i czcionek w celu obsługi globalizacji.
<TextBlock TextAlignment="Left">
Liczba znaków
Zachowaj do 50–60 liter na wiersz, aby ułatwić czytanie.
Nie używaj mniej niż 20 znaków lub więcej niż 60 znaków na wiersz, ponieważ jest to trudne do odczytania.
Wycinki i wielokropek
Gdy ilość tekstu wykracza poza dostępne miejsce, zalecamy obcięcie tekstu i wstawienie wielokropka [...], co jest domyślnym zachowaniem większości kontrolek tekstu platformy uwP .
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Wycinek tekstu i zawijaj, jeśli włączono wiele wierszy.
Nie używaj wielokropka, aby uniknąć bałaganu wizualnego.
Uwaga / Notatka
Jeśli kontenery nie są dobrze zdefiniowane (na przykład bez różnicowania koloru tła) lub gdy istnieje link, aby wyświetlić więcej tekstu, użyj wielokropka.
Języki
Zmienna interfejsu użytkownika Segoe to nasza czcionka dla języków angielskich, europejskich, greckich i rosyjskich. W przypadku innych języków zapoznaj się z poniższymi zaleceniami.
Globalizowanie/lokalizowanie czcionek
Interfejsy API do mapowania czcionek LanguageFont umożliwiają programowy dostęp do zalecanej rodziny, rozmiaru, wagi i stylu czcionek dla konkretnego języka. Obiekt LanguageFont zapewnia dostęp do poprawnych informacji o czcionkach dla różnych kategorii zawartości, w tym nagłówków interfejsu użytkownika, powiadomień, tekstu treści i czcionek treści dokumentu edytowalnych przez użytkownika. Aby uzyskać więcej informacji, zobacz Dostosowywanie układu i czcionek w celu obsługi globalizacji.
Czcionki dla języków innych niż łaciński
| Rodzina czcionek | Style | Notatki |
|---|---|---|
| Ebrima powiedział: | Zwykły, pogrubiony | Czcionka interfejsu użytkownika dla skryptów afrykańskich (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
| Gadugi powiedział: | Zwykły, pogrubiony | Czcionka interfejsu użytkownika dla północnoamerykańskich systemów pisma (syllabariusz kanadyjski, Cherokee, Osage). |
| Interfejs użytkownika Leelawadee | Zwykłe, półświetlone, pogrubione | Czcionka interfejsu użytkownika dla skryptów południowoazjatyckich (Buginese, Khmer, Lao, Thai). |
| Malgun Gotyk | Zwykły | Czcionka interfejsu użytkownika dla języka koreańskiego. |
| Interfejs użytkownika Microsoft JhengHei | Zwykły, pogrubiony, jasny | Czcionka interfejsu użytkownika dla języka chińskiego tradycyjnego. |
| Interfejs użytkownika usługi Microsoft YaHei | Zwykły, pogrubiony, jasny | Czcionka interfejsu użytkownika dla języka chińskiego uproszczonego. |
| Tekst mjanmy | Zwykły | Rezerwowa czcionka dla pisma Mjanmy. |
| Interfejs użytkownika Nirmala | Zwykłe, półświetlone, pogrubione | Czcionka interfejsu użytkownika dla skryptów południowoazjatyckich (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu). |
| Segoe UI | Regular, kursywa, kursywa jasna, kursywa, pogrubiona, pogrubiona kursywa, jasna, semilight, semibold, | Czcionka interfejsu użytkownika dla języka arabskiego, ormiańskiego, gruzińskiego i hebrajskiego. |
| SimSun | Zwykły | Starsza czcionka chińskiego interfejsu użytkownika. |
| Interfejs użytkownika Yu Gothic | Jasny, Semilight, Regularny, Semibold, Pogrubiony | Czcionka interfejsu użytkownika dla języka japońskiego. |
Czcionki
Czcionki sans-serif
Czcionki sans-serif są doskonałym wyborem dla nagłówków i elementów interfejsu użytkownika.
| Rodzina czcionek | Style | Notatki |
|---|---|---|
| Układ Arial | Regularne, kursywa, pogrubiona, pogrubiona kursywa, czarna | Obsługuje skrypty europejskie i bliskowschodnie (łaciński, grecki, cyrylica, arabski, ormiański i hebrajski). Czarna odmiana wspiera tylko europejskie alfabety. |
| Język Calibri | Regularne, Kursywa, Pogrubione, Pogrubiona kursywa, Jasne, Jasna kursywa | Obsługuje skrypty europejskie i bliskowschodnie (łaciński, grecki, cyrylica, arabski i hebrajski). Arabski dostępny tylko w pozycji pionowej. |
| Consolas powiedział: | Regularne, Kursywa, Pogrubienie, Pogrubiona Kursywa | Czcionka o stałej szerokości, która obsługuje skrypty europejskie (łaciński, grecki i cyrylica). |
| Segoe UI | Regular, kursywa, kursywa jasna, kursywa, pogrubiona, pogrubiona kursywa, jasna, semilight, semibold, | Czcionka interfejsu użytkownika dla skryptów europejskich i Bliskiego Wschodu (arabski, ormiański, cyrylica, gruziński, grecki, hebrajski, łaciński) oraz skryptu Lisu. |
| Selawik | Regular, Półlekkie, Lekkie, Pogrubione, Półgrube | Czcionka typu open source zgodna z interfejsem użytkownika Segoe przeznaczona dla aplikacji na innych platformach, które nie chcą tworzyć pakietu interfejsu użytkownika Segoe. Pobierz aplikację Selawik w witrynie GitHub. |
Czcionki szeryfowe
Czcionki serif są dobre do prezentowania dużych ilości tekstu.
| Rodzina czcionek | Style | Notatki |
|---|---|---|
| Cambria | Zwykły | Czcionka serif obsługująca skrypty europejskie (łaciński, grecki, cyrylica). |
| Kurier nowy | Regularne, Kursywa, Pogrubienie, Pogrubiona Kursywa | Czcionka stałej szerokości serif, która obsługuje skrypty europejskie i bliskowschodnie (łaciński, grecki, cyrylica, arabski, ormiański i hebrajski). |
| Gruzja | Regularne, Kursywa, Pogrubienie, Pogrubiona Kursywa | Obsługuje skrypty europejskie (łaciński, grecki i cyrylica). |
| Times New Roman | Regularne, Kursywa, Pogrubienie, Pogrubiona Kursywa | Starsza czcionka obsługująca skrypty europejskie (łaciński, grecki, cyrylica, arabski, ormiański, hebrajski). |
Czcionki zmienne
Czcionki zmiennych są dobre do precyzyjnego kontrolowania wyglądu tekstu.
| Rodzina czcionek | Osi | Notatki |
|---|---|---|
| Lotnisko Bahnschrift | Waga, szerokość | Czcionka zmienna, która obsługuje alfabet łaciński, grecki i cyrylicy. |
| Zmienna interfejsu użytkownika Segoe | Waga, rozmiar optyczny | Czcionka zmienna, która obsługuje alfabet łaciński, grecki i cyrylicy. |
Symbole i ikony
| Rodzina czcionek | Style | Notatki |
|---|---|---|
| Zasoby Segoe MDL2 | Zwykły | Czcionka interfejsu użytkownika dla ikon aplikacji. Aby uzyskać więcej informacji, zobacz artykuł czcionki Segoe Fluent Icons. |
| Emotikony interfejsu użytkownika Segoe | Zwykły | Czcionka interfejsu użytkownika dla emoji. |
| Symbol interfejsu użytkownika Segoe | Zwykły | Czcionka rezerwowa dla symboli. |
Powiązane artykuły
- Kontrolki tekstu
- zasoby motywu XAML
- Style XAML
- Typografia firmy Microsoft
- Fonty zmienne
Współpracuj z nami na GitHub
Źródło tej treści można znaleźć na GitHubie, gdzie można także tworzyć i przeglądać problemy oraz pull requesty. Więcej informacji znajdziesz w naszym przewodniku dla współautorów.
Windows developer