Rambler's Top100
Максим Покровский

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.



Сейчас работаю над:


  • Техническая поддержка popsop.ru( url )

    Текущий статус - изменнение функционала шаблона.

  • Разработка интерфейса для Korv ( url, design )

    Текущий статус - мелкие доработки графического интерфейса.

 Заказать мне работу

Рубрики / Теги

Последние записи

20.01

Переходим на em
Комментарии (21) CSS, HTML

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

Итак, вот такая конструкция:

html{
    font-size:100.01%;
    }
   
body{
    font-size:62.5%;
    }

font-size:100.01%; - установили шрифт стандартного размера (16px). Почему я написал 100.01%? Это из-за проблем округления в Opera и Safari. Незнаю может уже пофиксили, но я навсякий случай продолжаю так писать.

font-size:62.5%; - Что бы не мучаться с математикой устанавливаем размер шрифта в 10px. Один раз посчитали, и хватит

Как пользоваться:

Например, нам нужен размер заголовка 24px, тогда пишем так: font-size:2.4em;
т.е 24px = 2.4em. Визаульное сходство прослеживается?

На что надо обратить внимание:

EM наследуется! Поэтому добрый совет, прописывайте размер шрифта непосредсвенно тегу с текстом. Тоесть если у вас такой код:

<div id="sidebar">
   <p>текст</p>
   <p>текст</p>
   <p>текст</p>
</div>

то следует писать не #sidebar{font-size:1.2em;}, а #sidebar p{font-size:1.2em;}. Поверьте, так гораздо меньше гемора. Если же вам приходится указывать размер шрифта вложенному элементу, например:

Новинки Все новинки

, а у родителя уже указан размер, то код будет такой:

h2{
    font:normal 2.4em Arial; // 24px
    }
   
h2 a{
      font-size:0.5em; //12px
      }

Математика тут элементраная: делем желаемое, на имеемое (12px/24px=0.5em)

Сорри за сжатую форму поста, наступила зима, сессия продрала свои налитые кровью глазки и возалкала свежей крови. Аминь.

Метки:,

Комментарии

  1. 1
    tapazukk (21.01.2008) #

    Немнога занудства, для html-то зачем устанавливать шрифт, когда вполне достаточно для body 65,2%, которые от дефолтных 16-px высчитывают необходимые 10px?

  2. 2
    Brando (21.01.2008) #

    Спасибо за статью…ак действительно намного проще и быстрее

  3. 3
    quwi (21.01.2008) #

    (12px/24px=12px) ? Возможно, (12px/24px=0,5 em) ?

  4. 4
    le`Mur (21.01.2008) #

    Brando, рад что пригодилось.
    quwi,точно. Спасибо за замечание, пофиксил
    tapazukk, в браузере пользователем может быть установлено другое значение отличное от 16px. 100,01% сбрасывает его на дефолтные.

  5. 5
    Dimox (21.01.2008) #

    Этот пост написан, словно ответ на мой недавний вопрос :)

  6. 6
    le`Mur (21.01.2008) #

    Dimox, ага есть такое )

  7. 7
    Nikita (22.01.2008) #

    Уже надо переходить на px и убивать IE6. А ты только сейчас предлагаешь перейти на em :)
    По теме:
    А не лучше ли тогда написать так:
    font-size:6.25%;
    тогда, по идее 1em будет равняться 1px. Или сотые не работают? :)

  8. 8
    le`Mur (22.01.2008) #

    Уже надо переходить на px и убивать IE6. А ты только сейчас предлагаешь перейти на em

    Не, я давно уже перешел. Это я читателям сообщаю. А, вообще, бабки на завалинках рекут, мол, IE8 всех спасет. :)

    А не лучше ли тогда написать так:
    font-size:6.25%;
    тогда, по идее 1em будет равняться 1px.

    Любопытно. Я потестирую.

  9. 9
    Денис Радченко (23.01.2008) #

    Проясните меня темного, зачем переходить на em, если размер шрифта все равно указывается жестко?

  10. 10
    Nikita (23.01.2008) #

    Денис Радченко, это всё для нашего «любимого» IE6. В нём нельзя будет менять размер шрифта если шрифт указан в px.

  11. 11
    TNT (23.01.2008) #

    to tapazukk

    Немнога занудства, для html-то зачем устанавливать шрифт

    Никогда не слышали про “Extreme font-resizing bug”, если нет - почитайте. Заданием для font-size исправляется этот баг, хоть это и не главное его свойство, но баг очень неочевиден…

  12. 12
    tapazukk (25.01.2008) #

    to TNT
    в такой формулировке еще не слышал о_O
    Хотя, да, метода верная, сделать контрольный выстрел для html, просто невстречал ранее.

  13. 13
    le`Mur (25.01.2008) #

    А не лучше ли тогда написать так:
    font-size:6.25%;
    тогда, по идее 1em будет равняться 1px.

    Как я и обещал потестил. Подобная запись не работает в Opera. Да и дефолтный шрифт ставиться уж очень маленьким.

  14. 14
    Михаил Валенцев (31.01.2008) #

    Собственно, указываю размеры в em’ах (ну и font-size:100.01%, разумеется).

    Такое вот замечание:
    В последней работе решил попробовать с

    font-size:62.5%;

    - в диком браузере Konqueror шрифты получаются чуть меньше размером. Возможно, что откажусь от приема - буду уже по привычке расставлять размеры “на глаз”. :)

  15. 15
    Максим Покровский (31.01.2008) #

    101% для html указывали?

  16. 16
    Михаил Валенцев (31.01.2008) #

    100.01 разумеется :)

  17. 17
    Максим Покровский (31.01.2008) #

    Я как то тестил (давно уже) нормально было. А может случайно шрифт в браузере меньше поставил? У меня была схожая ситуация с FF? когда было различие в 1 пиксель. Оказалось я просто колесико мышки крутнул с зажатым CTRL.

  18. 18
    vladfrandom (12.03.2008) #

    внесу свои 5 копеек.
    Универсальнее будет:

    body{
    font-size:64%;
    }

    Спасибо товарищу Опере за веселое округление дробей.

  19. 19
    Максим Покровский (12.03.2008) #

    Почему это?

  20. 20
    лей (31.03.2008) #

    [оффтопик]
    У вас ссылки с портфолио не рабочие (старый редирект).
    http://pokrovskii.com/2008/01/20/perehodim-na-em/

  21. 21
    Максим Покровский (31.03.2008) #

    Большое спасибо за наблюдательность!

Оставить комментарий

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте
<code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, css, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на &lt;


!

Самое обсуждаемое

Они читают меня, я читаю их

— Люди делятся на заказчиков и тех, кто может ими стать.
(девиз успешного фрилансера)