EM dla linii o wysokości

Question

Chciałbym przekonwertować moją nową stronę internetową z pikseli na ems. Moje pytanie brzmi, czy powinienem również zastosować ems do mojej własności text-height?

Answer 1

Zakładając, że „konwersja do EMS” oznacza przy użyciu urządzenia em dla font-size, to należy ustawić line-height w sposób, który również dostosowuje się do rozmiaru czcionki. Te dwie właściwości są ze sobą ściśle powiązane i jeśli ustawisz jedną z nich w em, a drugą (np.) W px lub pt, strona zostanie zerwana, jeśli zmieni się rozmiar czcionki. Tak więc byłoby to sprzeczne z samą ideą "używania ems" do używania zasadniczo różnych jednostek dla zasadniczo połączonych właściwości.

Na przykład, jeśli ustawisz font-size: 1.5em i line-height: 18px, rzeczy będą zależały od rozmiaru czcionki elementu nadrzędnego elementu i mogą pójść źle, jeśli rozmiar jest o wiele mniejszy lub znacznie większy niż oczekiwano.

Niezależnie od tego, czy używasz jednostki em czy czystej liczby, to inna sprawa. Używanie tylko liczby, jak w line-height: 1.2, jest przede wszystkim równoważne użyciu jednostki em, jak w line-height: 1.2em. Ale jest różnica, że ​​po odziedziczeniu line-height jest to czysta liczba, która zostaje odziedziczona, a nie obliczona wartość.

Na przykład, jeśli element wewnętrzny ma dwukrotnie większą czcionkę niż jego element nadrzędny, wówczas odziedziczona wartość 1.2 oznacza, że ​​jest używany 1,2-krotny rozmiar czcionki, co jest prawidłowe. Ale jeśli rodzic miałby line-height: 1.2em, dziecko odziedziczyłoby wartość równą 1,2 krotności rozmiaru czcionki rodzica - która jest znacznie mniejsza niż jego własny rozmiar czcionki.

więcej przykładów końcowych wyjaśnienie zobaczyć line-height @ Mozilla Developer Network

Answer 2

można spróbować line-height:1.3 !important;

Answer 3

line-height można ustawić w px, em „s, każda jednostka będzie pasować.

line-height działa najlepiej i przyszłościowo, jeśli używasz współczynnika/mnożnika, co oznacza brak jednostki, ale tylko liczbę, która pomnaża rozmiar czcionki.

.foo { 
    font-size: 1.3em; /* based that 1em == 10px */ 
    line-height: 1.3; /* 16.9px line-height */ 
} 

Tak, Tak, można, aby odpowiedzieć Ci pytanie: nie, nie powinno.

Po prostu przejdź do wysokości linii bazującej na czynnikach, aby uzyskać dowód na przyszłość.

Answer 4

Zaleca się użyć numeru niemianowana do line-height (aby zapobiec kwestii dziedziczenia). Obliczona wysokość linii będzie wówczas równa iloczynowi wartości bezelementowej pomnożonej przez rozmiar czcionki elementu.

może być wygodniejsze w użyciu skrótu font CSS, tak jak (przykład pobranych z docs Mozilla CSS):

div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } 

Dobrym przykładem dlaczego wartość niemianowana jest preferowane są tu: Prefer unitless numbers for line-height values .