Generator stosu fontów CSS — systemowe stosy fontów z fontami CJK

Do czego służy to narzędzie

Generator stosu fontów CSS tworzy gotową do wklejenia wartość font-family z fontów, które są już zainstalowane na urządzeniach twoich odwiedzających. Wybierz styl, na przykład natywny font systemowego UI, neogroteskę w rodzaju Inter i Helvetica, szeryfowy font przejściowy jak Charter albo przyjazny dla kodu font monospace, a narzędzie wypisze najlepszy font na każdej platformie we właściwej kolejności.

Stosy bazują na znanej kolekcji Modern Font Stacks, a do tego obejmują klasyczny stos -apple-system, BlinkMacSystemFont, "Segoe UI", którego wiele stron wciąż używa. Możesz dodać fonty zapasowe dla chińskiego uproszczonego, chińskiego tradycyjnego, japońskiego, koreańskiego, arabskiego, tajskiego lub hindi oraz kolorowe fonty emoji na końcu.

Jak używać

Wybierz Stos fontów. Podgląd po lewej pokazuje, jak wygląda on na urządzeniu, którego właśnie używasz; możesz edytować jego tekst, aby wypróbować własne słowa.
Wybierz Fonty dla innych pism, jeśli twoje strony zawierają tekst chiński, japoński, koreański, arabski, tajski lub w hindi.
Włącz lub wyłącz Dodaj fonty emoji.
Wybierz Wynik: zwykłą deklarację font-family, właściwość niestandardową CSS (zmienną), wpis fontFamily dla Tailwinda lub zwykłą listę.
Skopiuj wynik lub pobierz go jako plik .css.

Nazwy zawierające spacje lub zaczynające się od cyfry są automatycznie ujmowane w cudzysłów; słowa kluczowe CSS, takie jak system-ui i sans-serif, nigdy nie są cytowane, bo cudzysłów zamieniłby je w nazwy fontów, które nie istnieją.

Przykład

Systemowy UI z zapasowymi fontami dla chińskiego uproszczonego:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Wskazówki

Używaj jednego stosu dla tekstu głównego i stosu monospace dla kodu: dwa stosy systemowe nic nie kosztują przy ładowaniu.
Podgląd zależy od fontów zainstalowanych na twoim własnym urządzeniu, więc sprawdź stronę także na Windowsie i telefonie.
Jeśli później dodasz font webowy, umieść go na początku listy, a stos systemowy zostaw jako zapasowy.

FAQ

› Czym jest stos fontów?

To lista rodzin fontów we właściwości CSS font-family. Przeglądarka używa pierwszego fontu zainstalowanego na urządzeniu, a w razie jego braku przechodzi do kolejnego, aż do rodziny ogólnej, takiej jak sans-serif.

› Po co dodawać fonty chińskie, japońskie lub koreańskie?

Zachodnie fonty, takie jak Inter czy Charter, nie mają glifów CJK. Umieszczenie PingFang SC, Microsoft YaHei lub Noto Sans SC przed rodziną ogólną sprawia, że chiński tekst używa fontu pasującego stylem, a nie przypadkowego fontu wybranego przez system. To samo dotyczy arabskiego, tajskiego i hindi (dewanagari). Rosyjski, ukraiński, grecki, wietnamski, turecki, polski i inne języki zapisywane alfabetem łacińskim lub cyrylicą nie wymagają niczego więcej: fonty systemowe i Noto w każdym stosie już je obsługują.

› Dlaczego fonty emoji są umieszczone po sans-serif?

Fonty emoji obejmują tylko emoji. Umieszczenie ich na końcu gwarantuje, że zwykłe litery i cyfry nigdy nie zostaną wyrenderowane fontem emoji, a emoji i tak dostaną kolorowe glify na każdej platformie.

› Czy te stosy wymagają pobierania fontów webowych?

Nie. Każdy stos korzysta z fontów dostarczanych z Windows, macOS, iOS, Androidem lub popularnymi dystrybucjami Linuksa, więc strony ładują się bez żadnych żądań o fonty.