Dimensione del carattere nei CSS con barra

133

Cosa significa la barra qui:

font: 100%/120%;

html css size

— alex
fonte

font-sizenon accetta la barra. La proprietà corretta è font.

— BoltClock

cosa ne pensi di questi? background: "rgba (0, 0, 0, 0) nessuna ripetizione scroll 0% 0% / auto padding-box border-box"

— jerinho.com

196

Questo in realtà imposta due proprietà ed è equivalente a:

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

Per citare la documentazione ufficiale :

La sintassi di questa proprietà si basa su una tradizionale notazione tipografica abbreviata per impostare più proprietà relative ai caratteri.

Come ha detto David M nei commenti, rispecchia la tradizione tipografica di specificare le dimensioni dei caratteri come " x pt su y pt" per indicare la dimensione del glifo all'altezza della linea.

Ma l'esempio nella tua domanda è in realtà errato e verrebbe ignorato dal browser: puoi solo combinare queste due proprietà nella fontnotazione abbreviata e devi specificare almeno la dimensione del carattere e la famiglia. Scrivere semplicemente font: 100%/120%;non è quindi sufficiente; puoi aggiungere un nome di famiglia generico per renderlo valido, ad esempio:

font: 100%/120% serif;

— Konrad Rudolph
fonte

Serve a rispecchiare la vecchia sintassi di composizione, in cui si dovrebbe impostare il carattere come, ad esempio "10pt su 12pt" o "10pt / 12pt".

— David M

In realtà lo uso abbastanza. Il designer con cui lavoro si riferisce sempre al dimensionamento come, ad esempio, "14 su 22". L'ho messo per caso un giorno e sono rimasto sorpreso / contento quando ha funzionato.

— Dylan Lukes,

una sveltina: anche questo formato non richiede di specificare la famiglia di caratteri? I miei browser stanno ignorando questa proprietà: font: 12px / 16px; ma accettando questo: font: 12px / 16px sans-serif; Questo comportamento è anche documentato qui

— kumarharsh,

@Harsh Sì, una famiglia (insieme a una dimensione) è minimamente richiesta per la fontproprietà stenografia come puoi vedere nella definizione ufficiale .

— Konrad Rudolph,

grazie per il chiarimento. Forse puoi aggiornare la risposta (o la domanda) in quanto è leggermente fuorviante in quanto un lettore occasionale può presumere che funzionerebbe solo una dichiarazione SIZE / LINE_HEIGHT.

— kumarharsh,

Konrad ha questo, ma ci sono molte proprietà stenografiche CSS come questa che puoi usare per abbreviare i tuoi fogli di stile. Alcuni sembrano un po 'criptici se non ne sei consapevole.

— Bill the Lizard
fonte

Tuttavia, la maggior parte delle scorciatoie riguarda proprietà di stile correlate (ad es border-*.). David ha fornito una buona spiegazione nei commenti alla mia risposta. Quanto alle cianfrusaglie essere criptiche: certamente vere, ma così dannatamente utili e abbastanza facili da imparare.

— Konrad Rudolph,