Использование дробных em в свойстве CSS font-size

Скажем, у меня определено следующее правило CSS:

.className {
font-size:0.89em;
}

Мой вопрос заключается в том, насколько «глубоко» я могу углубиться в дроби, указав их для браузеров, чтобы они фактически поддерживали его, и чтобы размер шрифта отображался по-разному для небольшого дробного изменения значения em?


css font-size em
person ahmd0    schedule 05.10.2011    source источник
comment
Кажется, они заходят довольно глубоко, у меня нет конкретных цифр, которые я мог бы дать, но проверьте что-то вроде pxtoem.com и просто поиграться. Вы увидите, что они могут сделать все, что угодно. Я видел ems, установленный раньше, например, 0,631111111111111em, и они работали. Однако маловероятно, будет ли это заметно отличаться от 0,63em.   -  person Doozer Blake    schedule 05.10.2011
comment
Отлично. И кажется, что большинство основных браузеров отображают даже малейшее изменение значения em с разным размером шрифта. Почему бы вам не опубликовать это как ответ, и я проверю его как правильный.   -  person ahmd0    schedule 05.10.2011
comment
В конечном счете, наименьшая единица масштаба — 1 пиксель, верно?   -  person JohnB    schedule 05.10.2011
comment
@JohnB ну, я не говорю об этой экстремальной ситуации)) Мне было любопытно, будет ли, скажем, 0,89 em отображаться иначе, чем 0,88 em и так далее.   -  person ahmd0    schedule 05.10.2011
comment
Мне было бы интересно узнать, есть ли у кого-то лучший, более полный ответ. я дам ему день или около того.   -  person Doozer Blake    schedule 05.10.2011
comment
Похоже, что IE9 и 10 будут округлять дроби только до двух знаков после запятой. Таким образом, 1/12em будет округлено до 0,08em, а 0,08em * 12px/em станет 0,96px вместо одного 1px. Это не должно быть проблемой, поскольку 0,96 пикселя должны отображаться как 1 пиксель, верно? Неправильно снова Боб. IE-ответ на этот вопрос, по-видимому, иногда да, иногда нет.   -  person Adrian Schmidt    schedule 11.03.2013

Ответы (2)


arrow_upward
6
arrow_downward

JohnB прав. Мы по-прежнему отображаем в пикселях независимо от используемой единицы размера, и небольшие изменения в ems не изменят отображаемый размер:

Например, для текста, первоначально отображаемого на высоте 20px*, мы видим, что нет никакого эффективного изменения, когда добавляется правило, чтобы сделать его 0,99em от исходной высоты:

20 * 0.99 = 19.8

Браузер не может отображать 0,8 пикселя, поэтому (при условии, что он будет округлен) он все равно будет отображать его как 20 пикселей в высоту.

Хотя кажется, что браузеры не всегда округляют, как ожидалось:

http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/

http://ejohn.org/blog/sub-pixel-problems-in-css/

* Да, я знаю, что размер шрифта 20 пикселей не всегда означает, что он отображается с размером 20 пикселей!

person james6848    schedule 05.10.2011

arrow_upward
1
arrow_downward

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

Я обнаружил это при установке границ медиа-запроса, где одна максимальная ширина находилась на расстоянии 0,00001 em от другой минимальной ширины, и она была округлена, и оба запроса были активированы. После изменения разницы на 0,001em запросы работали исключительно так, как ожидалось.

person Adam Jagosz    schedule 02.04.2019