Розмір шрифту в CSS -% або em?

112

Під час встановлення розміру шрифтів у CSS я повинен використовувати відсоткове значення ( %) або em? Чи можете ви пояснити перевагу?

css fonts font-size

— Мати
джерело

1

На мою думку, у 2016 році різниці між em та% немає. Якщо я ввожу 1,2 em, всі сучасні браузери вважають, що я використовував 120%, і, наприклад, якщо я використовую 0,7 em, то всі сучасні браузери вважають, що я використовував 70% ... Це те, що я відчував у CSS

— Махді Джазіні

79

Є дуже хороша стаття про веб-типографію на A List Apart .

Їх висновок:

Було показано, що розмір тексту та висоти рядків у ems із відсотком, визначеним на корпусі (та необов'язковий застереження для Safari 2), забезпечує точний текст із можливістю зміни розміру у всіх веб-переглядачах, які сьогодні використовуються. Це техніка, яку ви можете помістити в свою сумку для набору і використовувати як найкращу практику щодо розміщення тексту в CSS, що задовольняє і дизайнерів, і читачів.

— Гленн Славен
джерело

29

Насправді line-heightsкраще писати без будь-яких одиниць. Це дозволено специфікацією, і повністю уникає певних дійсно дратівливих примх браузера, коли мова йде про em

— -висоті

16

Я хочу, щоб люди усвідомлювали, що ця стаття з 2007 року. З тих пір сучасні браузери стали більш поширеними, а сучасні браузери зазвичай збільшують зображення, а не збільшують розмір шрифту за замовчуванням. Через це "px" став більш поширеним і, на мою думку, кращим підходом. Звичайно, це дискусійно, але я особисто стикався з проблемами в проектах через гніздування їх.

— Mohag519

5

@ Mohag519 гніздування ем - небезпечна пастка. :)

— Вишнудев K

@ Mohag519 не піксель подарує вам щось набагато менше, ніж було призначено для мобільних пристроїв, які мають високу щільність пікселів? Я не думаю, що ми хочемо, щоб наші сайти були схожими на робочий стіл, але надзвичайно крихітні на мобільних;)

— johnb003

@ johnb003 У таких мобільних пристроїв коефіцієнт пікселів пристрою перевищує 1. Наприклад, iPhone 4 має фізичну ширину екрана 640 пікселів, але відображається як 320 "CSS" пікселів (DPR = 2). Тож веб-сайт не здається меншим!

— Бенджамін

14

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

%: Деякі браузери не обробляють відсотки для розміру шрифту, але інтерпретують 150% як 150 пікселів. (Наприклад, деякі версії NN4.) IE також має проблеми з відсотками на вкладені елементи. Здається, IE використовує відсотки відносно вікна перегляду замість відносно батьківського елемента. Ще одна проблема (хоча і правильна відповідно до специфікацій W3C), в Moz / Ns6 ви не можете використовувати відсотки відносно елементів без заданої висоти / ширини.

em: Іноді браузери використовують неправильний розмір референсу, але відносні одиниці - це той, що має найменші проблеми. Ви можете вважати, що іноді трактується як px.

pt: сильно відрізняється між роздільною здатністю і не повинен використовуватися для відображення. Однак це досить безпечно для друку.

px: Єдина надійна абсолютна одиниця на екрані. Це може бути неправильно інтерпретовано в друку, хоча одна точка зазвичай складається з декількох пікселів, і, отже, все стає смішно мало.

— Голландська
джерело

Про річ пт. Я мав чудовий аргумент щодо /. про те (і втрачено). Я мав таку ж точку зору, як і ви, добре знати, що хтось поділяє це pov :)

— Vincent McNabb,

12

Ви справді говорите, що деякі користувачі Netscape Navigator 4 можуть не мати можливості переглядати мою сторінку правильно, якщо я буду використовувати відсотки для розміру шрифту?

— новачок

4

Цитується обговорення з 2002 року. Це все ще актуально? Чи є браузери в активному використанні з помилками em або%?

— Бені Чернявський-Паскін

1

Цитування 20-річних помилок у браузерах не є корисною відповіддю.

— d512

7

Обидва регулюють розмір шрифту залежно від того, яким він був. 1,5ем - це те саме, що 150%. Єдиною перевагою, здається, є читабельність, вибирайте те, що вам найбільше подобається.

— Ліам
джерело

Чи може хтось пояснити мені, чому це стає голосуванням? Саме так я зрозумів різницю між вмістом em та процентом. В даний час немає жодної переваги використання одного над іншим. Важливим є те, що ви використовуєте розмір, який відповідає розміру базового шрифту.

— Лі Теобальд,

1

Дякую Лі, я щойно перевірив це в IE6, IE7, Firefox 3, Safari 3, Opera 9.5 та Google Chrome, і все це в Windows, і всі вони здаються мені однаковими! <p style = "font-size: 0.6em;"> це тест </p> <p style = "font-size: 60%;"> це тест </p>

— Ліам

7

Справжня різниця стає очевидною, коли ви використовуєте її не для розміру шрифту. Установка paddingз 1emне такий же , як 100%. emзавжди відносно розміру шрифту. Але це %може бути відносно розміру шрифту, ширини, висоти і, можливо, деяких інших речей, про які я не знаю.

— Бьорн Тантау
джерело

5

З огляду на , що (майже?) Все браузери в даний час змінити розмір сторінки в цілому, а не тільки текст, попередні проблеми з pxпроти %проти emз точки зору доступного зміни розміру шрифту досить спірне питання.

Отже, відповідь полягає в тому, що це, мабуть, не має значення. Використовуйте все, що працює для вас.

% приємно, тому що дозволяє відносно змінити розмір.

px приємно, тому що досить просто керувати очікуванням при його використанні.

em може бути корисним, коли він також використовується для елементів компонування, оскільки може дозволити пропорційне розмір розмірів, пов'язаний з розміром тексту.

— DA.
джерело

Оманливу відповідь, особливо для тих, хто не знає багато про CSS в першу чергу. Не зважаючи на те, що CSS визначає логічні пікселі, що було жахливою ідеєю, заснованою на безсумнівно поспішному рішенні прийняти напад мобільних пристроїв, здатних на CSS десятиліття тому, пікселі цілком є на розсуд браузерів та користувачів, що стосується розміру шрифту за замовчуванням. , принаймні. На додаток до цього, тепер у нас є різний коефіцієнт співвідношення екрана (і не завжди пристроїв із екраном) та роздільної здатності від 240p до 2400p. Використання пікселів у CSS без JavaScript майже марно.

— amn

@amn добре, зауважте, що цій відповіді 8 років. Це довгий час в Інтернеті. Однак, пікселі все одно добре, якщо не ідеально. Більшість браузерів (усіх?) Розміщують шрифт пікселів належним чином на певному пристрої. Однак сьогодні я зазвичай використовую рема як свою одиницю вимірювання.

— DA.

Можливо, мені щось не вистачає, але яка користь, якщо така є, має довжину пікселів? Чому вони "прекрасні" чи "ідеальні"? Versus em, наприклад. З іншого боку, я думаю, що відповіді на ТА повинні прагнути бути позачасовими - це все-таки база знань. Вікіпедія програмування :) Оскільки оновлення Вікіпедії відображається на фактах, так, на мою скромну думку, слід відповідати ТАК.

— amn

@amn Я не сказав, що вони ідеальні чи не мали жодної реальної великої користі. Я щойно відповідав на питання ОП. Що стосується прагнення бути позачасовим, якщо ви можете передбачити майбутнє Інтернету через 8 років, більше сил вам! Але у мене немає часу постійно оновлювати тут свої десятирічні відповіді. Сподіваємось, люди знають достатньо, щоб подивитися на позначки часу на відповіді та взяти це до уваги.

— DA.

0

Щодо різниці між css одиницями %та em.

Наскільки я розумію (принаймні теоретично / концептуально, але, можливо, не так, як ці два одиниці можуть бути реалізовані в браузерах) ці два одиниці є рівнозначними, тобто якщо ви помножите свою emвеличину на 100і потім заміните emна %неї, має бути те саме?

Якщо насправді є якась реальна різниця між em та%, то хтось може це пояснити (або надати посилання на пояснення)?

(Я хотів додати цей мій коментар, куди він би належав, тобто з відступом трохи нижче відповіді, "Liam, answered Sep 25 '08 at 11:21"оскільки я також хочу знати, чому його відповідь було знято, але я не міг зрозуміти, як розмістити свій коментар і тому довелося написати ця відповідь "глобальна нитка")

— user743436
джерело

-1

Як згадує Галландська мова, px є найнадійнішим для веб-типографії, оскільки все, що ви робите на сторінці, здебільшого викладається з посиланням на монітор комп’ютера. Проблема з абсолютними розмірами полягає в тому, що деякі веб-переглядачі (IE) не змінюють розмір піксельних елементів на веб-сторінці, тому при спробі збільшення / зменшення все коригується, крім цих елементів.

Я не знаю, чи IE8 справляється з цим належним чином, але всі інші постачальники браузерів обробляють пікселі просто чудово, і це все ще є меншості, коли користувачеві потрібно збільшити / зменшити текст (це текстове поле на SO, можливо, є винятком). Якщо ви хочете забруднитись, ви завжди можете додати функцію javascript, щоб збільшити розмір тексту та запропонувати користувачеві кнопку "маленької" / "більшої".

— Крістіан П.
джерело

1

IE7 масштабує піксельні значення, якщо ви використовуєте масштабування. У IE6 не було масштабування, лише розмір тексту. Масштаб став вимогою через дизайнерів, які використовували фіксовану піксельну шкалу, а не дозволяли сторінці переповнюватися зі змінами розміру тексту.

— Майк Діммік,

Це все ще проблема з IE6, але, знову ж таки, ВСЕ все ще є проблемою з IE6. Хоча я уникав px в минулому через це, концепція масштабування веб-сторінки в цілому (проти jsut тексту) стала стандартною, і я знайшов себе за допомогою px набагато частіше.

— DA.

-1

Бібліотека інтерфейсу користувача Yahoo ( http://developer.yahoo.com/yui/ ) має чудовий набір базових класів css, які використовуються для "скидання" конкретних налаштувань браузера, щоб основа для відображення сайту була однаковою для всіх (підтримується) браузери.

Для YUI слід використовувати відсотки.

— косоант
джерело

Я використовував скидання YUI, але потім зрозумів, що налаштування розміру тексту браузерів НЕ РОБИТИ! Не бачите сенсу використовувати%, якщо у вас встановлено px на тілі, оскільки воно порушує налаштування розміру тексту.

— Джейсон