Rozmiar czcionki w CSS z ukośnikiem

133

Co oznacza tutaj ukośnik:

font: 100%/120%;
Alex
źródło
4
font-sizenie akceptuje ukośnika. Poprawna właściwość to font.
BoltClock
Co powiesz na te? background: "rgba (0, 0, 0, 0) brak powtarzanie przewijanie 0% 0% / auto padding-box border-box"
jerinho.com

Odpowiedzi:

197

To faktycznie ustawia dwie właściwości i jest równoważne z:

font-size: 100%;
line-height: 120%;

Cytując oficjalną dokumentację :

Składnia tej właściwości jest oparta na tradycyjnej, skróconej notacji typograficznej, służącej do ustawiania wielu właściwości związanych z czcionkami.

Jak powiedział David M w komentarzach, jest to zgodne z tradycją składu polegającą na określaniu rozmiarów kroju pisma jako „ x  pt na y  pt” w celu oznaczenia rozmiaru glifu na wysokości wiersza.

Ale przykład w twoim pytaniu jest w rzeczywistości błędny i zostałby zignorowany przez przeglądarkę: możesz łączyć tylko te dwie właściwości w fontnotacji skróconej i musisz określić co najmniej zarówno rozmiar czcionki, jak i rodzinę. font: 100%/120%;Dlatego samo pisanie nie wystarczy; możesz jednak dodać ogólne nazwisko rodziny, aby było ważne, np .:

font: 100%/120% serif;
Konrad Rudolph
źródło
53
Ma to na celu odzwierciedlenie starej składni składu, w której trzeba ustawić czcionkę na przykład „10 pkt na 12 pkt” lub „10 pkt / 12 pkt”.
David M
1
Właściwie używam tego całkiem sporo. Projektant, z którym pracuję, zawsze odnosi się do rozmiaru jako na przykład „14 na 22”. Włożyłem go przypadkiem pewnego dnia i byłem zaskoczony / zadowolony, gdy zadziałał.
Dylan Lukes
1
szybki numerek: czy ten format również nie wymaga określenia rodziny czcionek? Moje przeglądarki ignorują tę właściwość: font: 12px / 16px; ale akceptując to: font: 12px / 16px sans-serif; To zachowanie jest również udokumentowane tutaj
kumarharsh
@Harsh Tak, rodzina (wraz z rozmiarem) jest minimalnie wymagana dla fontnieruchomości skróconej, jak widać w oficjalnej definicji .
Konrad Rudolph
Dziękuję za wyjaśnienie. Być może możesz zaktualizować odpowiedź (lub pytanie), ponieważ jest to nieco mylące, ponieważ zwykły czytelnik może założyć, że tylko deklaracja SIZE / LINE_HEIGHT będzie działać.
kumarharsh
15

Konrad to dostał, ale istnieje wiele skrótowych właściwości CSS , takich jak ta, których możesz użyć do skracania arkuszy stylów. Niektóre z nich wyglądają trochę tajemniczo, jeśli ich nie znasz.

Bill the Lizard
źródło
Jednak większość skrótów odnosi się do powiązanych właściwości stylu (np border-*.). David dał dobre wyjaśnienie w komentarzach do mojej odpowiedzi. Jeśli chodzi o tajemnicze skróty: z pewnością prawdziwe, ale tak cholernie przydatne i całkiem łatwe do nauczenia.
Konrad Rudolph