У меня есть элемент управления, который помогает пользователю изменять размер шрифта самостоятельно. Но размер шрифта на html не влияет на значение размера от 0,1 до 0,4 em. Я использую Google Chrome Версия для 27.0.1453.110 мРазмер шрифта не влияет на значение от 0,1 до 0,4 em
HTML
<span class="text_menu_link">Home</span>
CSS
span.text_menu_link {font-size: 0.3em;}
em относительный размер шрифта. Если вы разместите свой пример внутри другого div, у которого есть большой размер шрифта, вы заметите, что вы do см. Изменение в диапазоне 0.1 - 0.4em, потому что он оценивает разумный фактический размер шрифта (над браузером минимум).
HTML
<div class=outer>
<span class="text_menu_link">Home</span>
</div>
CSS
.outer {font-size: 30pt;}
span.text_menu_link {font-size: 0.3em;}
См this для примера
Редактировать
@Rahul, в чем смысл этого редактирования? – jcsanyi
вы также можете упомянуть свою ссылку на скрипку внутри 'this', она выглядит хорошо и не слишком сильно растягивает ваш код. – Rahul
Я не согласен с тем, что выглядит лучше ... но это не важно. Я уверен, что это различие, которое обсуждалось на мета. – jcsanyi
Из примера кода, предоставленный через jsfiddle в комментариях, вопрос, как представляется, «почему некоторые настройки размера шрифта имеют тот же эффект», а не отсутствие эффекта:
<div>
<span style="font-size: 0.1em;">Home</span>
<span style="font-size: 0.2em;">Home</span>
<span style="font-size: 0.3em;">Home</span>
<span style="font-size: 0.4em;">Home</span>
<span style="font-size: 0.5em;">Home</span>
</div>
Они имеют эффект, как вы можно увидеть, сравнив их с отображением простого «дома». У них просто есть такой же эффект, во многих ситуациях, и причина в том, что в браузере есть минимальный размер шрифта.
С типичным основным размером шрифта 16 пикселей (12 баллов) настройка font-size: 0.5em запрашивает размер 8 пикселей. Это больше, чем типичный минимальный размер шрифта 11 пикселей, поэтому будут использоваться 11 пикселей. И для других настроек в примере результат, конечно, тот же.
Если вы изменили в настройках Chrome минимальный размер шрифта до 6 пикселей (наименьшее, что, по-видимому, разрешено и слишком мало для практически любых целей), вы заметите, что последний «Дом» становится больше, чем другие - поскольку теперь запрашиваемый размер составляет 8 пикселей, тогда как 0.4em запрашивает 6,4 пикселя, поэтому конечный результат вряд ли отличается от результата 6 пикселей, который будет использоваться для других текстов из-за ограничения. Кроме того, Chrome, похоже, на самом деле составляет от 6,4 до 6 (судя по тому, что он показывает в инструментах разработчика).
А если добавить, скажем,
div { font-size: 120px }
вы увидите, что слова будут иметь различные размеры шрифта.
И наконец, если вы зададите размер шрифта div, например. к тому же, что и минимальный размер шрифта браузера, то настройки font-size действительно не действуют.
Существует [минимальный размер шрифта] (http://lists.w3.org/Archives/Public/www-style/1999Mar/0086.html) в каждом браузере. Если вы хотите переопределить это, вы можете взглянуть на [это] (http://stackoverflow.com/questions/2421056/how-can-i-override-the-minimum-font-size-in-firefox). – Antony
Ухаживать за бровями, на которых вы тестируете? Хорошо работает в Safari 6.0 на OSX10.8: http://jsfiddle.net/JcrXw/ для тестового кода –
@ Antony, минимальный размер шрифта не мешает влиянию настройки; он просто ограничивает его эффект, так что вы не становитесь ниже установленного предела. –