Rozmiar czcionki w CSS z ukośnikiem

133

Co oznacza tutaj ukośnik:

font: 100%/120%;

html css size

— Alex
źródło

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

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

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

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

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

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