Rozmiar czcionki w CSS -% czy em?

112

Czy ustawiając rozmiar czcionek w CSS, powinienem używać wartości procentowej ( %) czy em? Czy możesz wyjaśnić zalety?

css fonts font-size

— Maty
źródło

1

Moim zdaniem w 2016 roku nie ma różnicy między em a%. Jeśli wprowadzę 1,2 em, wszystkie współczesne przeglądarki uważają, że użyłem 120%, a na przykład, jeśli używam 0,7 em, wszystkie nowoczesne przeglądarki uważają, że używałem 70% ... To jest to, czego doświadczyłem w CSS

— Mahdi Jazini

79

W A List Apart jest naprawdę dobry artykuł o typografii internetowej .

Ich wniosek:

Wykazano, że rozmiar tekstu i wysokość linii w emach, z procentem określonym w treści (i opcjonalnym zastrzeżeniem dla Safari 2), zapewnia dokładny tekst z możliwością zmiany rozmiaru we wszystkich powszechnie używanych przeglądarkach. Jest to technika, którą możesz włożyć do torby i użyć jako sprawdzonej metody określania rozmiaru tekstu w CSS, która zadowoli zarówno projektantów, jak i czytelników.

— Glenn Slaven
źródło

29

Właściwie line-heightssą lepiej napisane bez żadnych jednostek. Jest to dozwolone przez specyfikację i całkowicie pozwala uniknąć pewnych naprawdę irytujących dziwactw przeglądarki, jeśli chodzi o emwysokości linii

— Már Örlygsson

16

Chcę uświadomić ludziom, że ten artykuł pochodzi z 2007 roku. Od tego czasu nowoczesne przeglądarki stały się bardziej powszechne, a nowoczesne przeglądarki zazwyczaj powiększają widok zamiast domyślnie zwiększać rozmiar czcionki. Z tego powodu „px” stał się bardziej powszechny i moim zdaniem lepszym podejściem. Oczywiście jest to dyskusyjne, ale osobiście napotkałem problemy w projektach z powodu ich zagnieżdżania.

— Mohag519,

5

@ Mohag519 gniazdowanie ich jest niebezpieczną pułapką. :)

— Vishnudev K,

@ Mohag519 czy px nie da ci czegoś znacznie mniejszego niż zamierzano w przypadku urządzeń mobilnych, które mają wysoką gęstość pikseli? Nie sądzę, że chcemy nasze strony być dokładnie jak pulpit, ale bardzo małe na telefon;)

— johnb003

@ johnb003 Takie urządzenia mobilne mają współczynnik pikseli urządzenia większy niż 1. Na przykład iPhone 4 ma fizyczną szerokość ekranu 640 pikseli, ale jest wyświetlany jako 320 pikseli „CSS” (DPR = 2). Więc strona nie wydaje się mniejsza!

— Benjamin

14

Z http://archivist.incutio.com/viewlist/css-discuss/1408

%: Niektóre przeglądarki nie obsługują procentu dla rozmiaru czcionki, ale interpretują 150% jako 150 pikseli. (Na przykład niektóre wersje NN4). IE również ma problemy z procentami w elementach zagnieżdżonych. Wygląda na to, że IE używa procentu względem widocznego obszaru zamiast względnego względem elementu nadrzędnego. Kolejny problem (choć poprawny zgodnie ze specyfikacją W3C), w Moz / Ns6 nie można używać procentów względem elementów bez określonej wysokości / szerokości.

em: Czasami przeglądarki używają niewłaściwego rozmiaru odniesienia, ale spośród jednostek względnych jest to ta z najmniejszymi problemami. Czasami może się jednak okazać, że jest interpretowane jako px.

pt: Różni się znacznie między rozdzielczościami i nie powinien być używany do wyświetlania. Jest jednak całkiem bezpieczny do użytku w druku.

px: jedyna niezawodna jednostka absolutna na ekranie. Może to jednak zostać błędnie zinterpretowane w druku, ponieważ jeden punkt składa się zwykle z kilku pikseli, przez co wszystko staje się śmiesznie małe.

— Galwegian
źródło

O rzeczy pt. Miałem świetną dyskusję na temat /. o tym (i przegrał). Miałem taki sam punkt widzenia jak Ty, dobrze wiedzieć, że ktoś podziela to pov :)

— Vincent McNabb

12

Czy naprawdę mówisz, że niektórzy użytkownicy Netscape Navigator 4 mogą nie być w stanie poprawnie wyświetlić mojej strony, jeśli użyję wartości procentowych dla rozmiarów czcionek?

— nowicjusz

4

Cytowana dyskusja pochodzi z 2002 roku. Czy jest to nadal aktualne? Czy jakieś przeglądarki są aktywnie używane z błędami em lub%?

— Beni Cherniavsky-Paskin

1

Cytowanie dwudziestoletnich błędów w przeglądarkach nie jest użyteczną odpowiedzią.

— d512

7

Oba dostosowują rozmiar czcionki w stosunku do tego, jaki był. 1.5em to to samo, co 150%. Jedyną zaletą wydaje się być czytelność, wybierz tę, która najbardziej Ci odpowiada.

— Liam
źródło

Czy ktoś może mi wyjaśnić, dlaczego ten głos został odrzucony? Dokładnie tak zrozumiałem różnicę między em a procentami. Obecnie nie ma żadnej przewagi w używaniu jednego nad drugim. Ważne jest, aby użyć rozmiaru odpowiadającego rozmiarowi czcionki podstawowej.

— Lee Theobald,

1

Dzięki Lee, właśnie przetestowałem to w IE6, IE7, Firefox 3, Safari 3, Opera 9.5 i Google Chrome, wszystkie w systemie Windows i wszystkie wydają mi się takie same! <p style = "font-size: 0.6em;"> to jest test </p> <p style = "font-size: 60%;"> to jest test </p>

— Liam

7

Prawdziwa różnica jest widoczna, gdy używasz jej nie dla rozmiarów czcionek. Ustawianie paddingz 1emnie jest taki sam jak 100%. emjest zawsze zależna od rozmiaru czcionki. Ale %może być zależne od rozmiaru czcionki, szerokości, wysokości i prawdopodobnie kilku innych rzeczy, o których nie wiem.

— Björn Tantau
źródło

5

Biorąc pod uwagę, że (prawie?) Wszystkie przeglądarki zmieniają teraz rozmiar strony jako całości, a nie tylko tekstu, poprzednie problemy z pxwersją %vs. ems, jeśli chodzi o zmianę rozmiaru dostępnej czcionki, są raczej dyskusyjne.

Tak więc odpowiedź brzmi, że prawdopodobnie nie ma to znaczenia. Użyj tego, co Ci odpowiada.

% jest fajny, ponieważ pozwala na względną zmianę rozmiaru.

px jest fajny, ponieważ podczas korzystania z niego dość łatwo jest zarządzać oczekiwaniami.

em może być przydatny, gdy jest również używany do elementów układu, ponieważ umożliwia proporcjonalne dopasowanie rozmiaru do rozmiaru tekstu.

— DA.
źródło

Myląca odpowiedź, szczególnie dla tych, którzy nie wiedzą zbyt wiele o CSS. Pomijając fakt, że CSS definiuje piksele logiczne, co było okropnym pomysłem opartym na niewątpliwie pochopnej decyzji o przystosowaniu się do ataku urządzeń mobilnych obsługujących CSS dziesięć lat temu, piksele są całkowicie w przeglądarkach i według uznania użytkowników, jeśli chodzi o domyślny rozmiar czcionki , przynajmniej. Oprócz tego mamy teraz szeroko różne proporcje ekranu (i nie zawsze urządzenia z ekranem) i rozdzielczości w zakresie od 240p do 2400p. Używanie pikseli w CSS bez JavaScript jest prawie bezużyteczne.

— rano

@ No dobrze, zwróć uwagę, że ta odpowiedź ma 8 lat. To DŁUGI czas w Internecie. To powiedziawszy, piksele są nadal dobre, jeśli nie idealne. Większość (wszystkich?) Przeglądarek dostosowuje rozmiar czcionki w pikselach do konkretnego urządzenia. Dziś jednak zwykle używałbym remu jako jednostki miary.

— DA.

Może czegoś mi brakuje, ale jaką korzyść, jeśli ktoś ma z długością pikseli? Dlaczego są „dobre” lub „idealne”? emNa przykład versus . Poza tym uważam, że odpowiedzi na SO powinny starać się być ponadczasowe - w końcu to baza wiedzy. Wikipedia programowania :) Ponieważ Wikipedia jest aktualizowana, aby odzwierciedlała fakty, tak moim skromnym zdaniem powinny być odpowiedzi SO.

— rano

@amn Nie powiedziałem, że są idealne ani nie przynoszą żadnych znaczących korzyści. Właśnie odpowiadałem na pytanie PO. Jeśli chodzi o dążenie do ponadczasowości, jeśli potrafisz przewidzieć przyszłość sieci za 8 lat, więcej mocy dla Ciebie! Ale nie mam czasu na ciągłe aktualizowanie odpowiedzi z dziesięciu lat. Miejmy nadzieję, że ludzie wiedzą wystarczająco dużo, aby spojrzeć na znaczniki czasu na odpowiedziach i wziąć to pod uwagę.

— DA.

0

Jeśli chodzi o różnicę między jednostkami CSS %i em.

O ile mi zrozumieć (przynajmniej teoretycznie / koncepcyjnie, ale być może nie w jaki sposób te dwie jednostki mogą być realizowane w przeglądarkach) te dwa zespoły są równoważne, to znaczy, jeśli pomnożyć emwartość z 100a następnie wymienić emz %nim powinno być to samo?

Jeśli rzeczywiście istnieje jakaś prawdziwa różnica między em a%, to czy ktoś może to wyjaśnić (lub podać link do wyjaśnienia)?

(Chciałem dodać ten komentarz mój, gdzie by należał, tj. Wcięty tuż pod odpowiedzią, "Liam, answered Sep 25 '08 at 11:21"ponieważ chcę również wiedzieć, dlaczego jego odpowiedź została odrzucona, ale nie mogłem wymyślić, jak umieścić tam mój komentarz i dlatego musiałem napisać ta „globalna odpowiedź wątku”)

— user743436
źródło

-1

Jak wspomina Galwegian, px jest najbardziej niezawodny w typografii internetowej, ponieważ wszystko inne, co robisz na stronie, jest głównie rozłożone w odniesieniu do monitora komputera. Problem z rozmiarami bezwzględnymi polega na tym, że niektóre przeglądarki (IE) nie skalują elementów wartości w pikselach na stronie internetowej, więc kiedy próbujesz powiększyć / pomniejszyć, wszystko dostosowuje się z wyjątkiem tych elementów.

Nie wiem, czy IE8 radzi sobie z tym poprawnie, ale wszyscy inni dostawcy przeglądarek obsługują piksele dobrze i nadal jest to przypadek mniejszości, w którym użytkownik musi powiększyć / pomniejszyć tekst (to pole tekstowe na SO może być wyjątkiem). Jeśli chcesz być naprawdę brudny, zawsze możesz dodać funkcję javascript, aby zwiększyć rozmiar tekstu i zaoferować użytkownikowi przycisk „mały” / „większy”.

— Christian P.
źródło

1

IE7 skaluje wartości pikseli dobrze, jeśli używasz zoomu. IE6 nie miał powiększenia, tylko rozmiar tekstu. Powiększenie stało się wymogiem ze względu na projektantów, którzy używali stałych skal pikseli zamiast pozwalać na ponowne wlanie strony wraz ze zmianami rozmiaru tekstu.

— Mike Dimmick,

Nadal jest to problem z IE6, ale z drugiej strony WSZYSTKO jest nadal problemem w IE6. Chociaż w przeszłości unikałem z tego powodu px, koncepcja powiększania strony internetowej jako całości (w przeciwieństwie do wyrzucania tekstu) stała się standardem i stwierdziłem, że znacznie częściej używam px.

— DA.

-1

Biblioteka interfejsu użytkownika Yahoo ( http://developer.yahoo.com/yui/ ) ma ładny zestaw podstawowych klas css używanych do "resetowania" ustawień specyficznych dla przeglądarki tak, aby podstawa wyświetlania strony była taka sama dla wszystkich (obsługiwane) przeglądarki.

W przypadku YUI należy używać procentów.

— kosoant
źródło

Używałem resetowania YUI, ale potem zdałem sobie sprawę, że ustawienia rozmiaru tekstu przeglądarki NIE DZIAŁAJĄ! Nie widzisz sensu używania%, jeśli masz ustawione piksele na treści, ponieważ łamie to ustawienia rozmiaru tekstu.

— Jason