Как использовать и управлять относительными значениями шрифта так же просто, как мы используем px

Question

Какие есть минусы для использования относительных значений em и % для шрифтов? и как избежать / решить проблему округления. Есть ли калькулятор?

Как использовать относительные значения так же просто, как мы используем px

Answer 1

Не так много минусов, использующих em или%. Иногда у меня возникали проблемы с тем, чтобы шрифты выглядели одинаково в IE и обычных браузерах. Но в большинстве случаев мне все равно приходится делать IE CSS, так что это не проблема.

Когда вы определяете шрифты в PX, шрифты не сглаживаются на некоторых компьютерах с Windows. Если вы используете EM или% они есть, и у вас есть очень точное управление размером шрифта. (Например, 1.249em).

В отличие от @scunliffe, я бы всегда использовал EM в качестве размера шрифта. Даже когда вы исправили дизайн с. Иногда невозможно создать пиксельный идеальный дизайн со шрифтами PX, потому что шрифты, отображаемые в Photoshop, выглядят иначе, чем в браузере.

Я сделал тестовый инструмент, чтобы показать различия: http://bluesys.ch/csstest/

и здесь вы можете найти инструмент для преобразования ваших значений PX в EM: http://pxtoem.com/

Answer 2

Возможно, я проповедую хору здесь, но я считаю, что аддон Firefox «Веб-разработчик» очень помогает, когда я занимаюсь настройкой шрифта.

https://addons.mozilla.org/en-US/firefox/addon/60/

Используйте «Информация»> «Показать информацию об элементе», чтобы увидеть точный размер пикселя для вашего (относительно размера) элемента. Изменение CSS (с точностью до 1 десятичного знака), пока возвращаемая сумма не станет круглым числом, сводит к минимуму вероятность того, что ваш текст будет иметь разные размеры в разных браузерах / операционных системах.

О, и из моего текущего проекта:

Стандартный (отображается как 12px) шрифт, установленный на обертке сайта, составляет 75% (основной текст - 100%), затем используйте:

• 14px: 116,7%
• 16px: 133,3%
• 18px: 150%
• 18 пикселей: 166,7%

Существует множество причин, по которым не следует использовать фиксированный размер текста (большая доступность - доступность), и, потратив некоторое время на сортировку CSS, вы никогда не оглянетесь.

Answer 3

Вот тебе маленький трюк.

В вашем CSS установите размер шрифта для ТЕЛА документа на 62,5%.

Теперь, когда вы хотите установить размер шрифта, вы используете значения EM. 1.1em будет равноэквивалентно до 11px и 1.2em до 12px и т. Д.

Вот так я и работаю.

Удачи. Майкл.

Answer 4

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

Еще одна проблема заключается в том, насколько сильно вы измените свое мнение об общем размере шрифта. Если вы делаете все в абсолютных значениях (px, pt), а затем решаете, что размер шрифта на сайте слишком мал, вам, возможно, придется изменить много значений, чтобы сделать все больше. И наоборот, если вы делаете все в относительных значениях (em,%), то вы хотите изменить размер только одной вещи, это повлияет на все ее дочерние элементы.

В конце концов, лучший выбор - просто быть последовательным .

Answer 5

Я не верю, что (м) есть минусы. Использование px ограничивает вашу способность масштабировать текст в IE6, но в противном случае использование % или em должно позволить вам хорошо масштабировать.

Единственное, о чем я могу подумать, это то, что если вы хотите, чтобы ваш текст был точно 12pt или 13px, то использование % или em не то, что вам нужно. Однако, если вы пытаетесь создать дизайн с фиксированной шириной, в котором все отмерено до пикселя , я бы советовал против него . Сеть - это свободно распространяемый холст ... у каждого пользователя есть окно разных размеров, выбор размера шрифта / масштаба и различия в операционной системе. Ваш контент должен хорошо смотреться на любом экране, приспосабливаясь к недвижимости, которая вам предоставляется.