властивості css

Властивість FONT-SIZE

Дана властивість дозволяє вказати розмір використовуваного шрифту. Робити це можна кількома способами, але слід пам'ятати про ті обмеження, які вони за собою тягнуть. Але про все по порядку.

Як ви знаєте, в HTML розмір шрифту задавався за допомогою атрибута size елемента FONT. Розмір вказувався в чисельному вираженні від 1 до 7. Заводський параметр 3.

Перший спосіб вказати розмір шрифту в CSS - за ключовими словами, яких теж сім:

При використанні ключових слів реальний розмір шрифту залежить від браузера і операційної системи. У специфікації CSS2 з цього приводу сказано тільки наступне: коефіцієнт збільшення розміру шрифту в браузері повинен складати 1,2. Тому, якщо, наприклад, для ключового слова medium встановлюється розмір в 12 пунктів, то для ключового слова large розмір шрифту повинен бути 14,4 пунктів, тобто в 1,2 рази більше. Слід зазначити, що в специфікації CSS1 цей коефіцієнт дорівнював 1,5. Однак практика показала, що це значення занадто велике, тому воно було зменшено до 1,2. Браузерами ж не дотримується ні та, ні інша величина. Збільшення і зменшення шрифту відбувається на деякий довільний коефіцієнт, який у кожного браузера свій.

Так, в браузері Internet Explorer значенням medium реально відповідає шрифт розміром 13,5 пунктів. Тому для даного браузера правила:


будуть однакові. А ось в браузері Mozilla розмір шрифту, вказаного за допомогою ключового слова medium. буде дорівнює вже 12 пунктам. Погодьтеся, різниця досить суттєва.

Зауваження. Все сказане вище свідчить про те, що ставити розмір шрифту за допомогою ключових слів досить складно з точки зору "однаковості" відображення коду в різних браузерах. Тому, щоб у всіх браузерах розмір виявився однаковим, потрібно використовувати друге правило або вказувати розміри в величинах em.

Є ще два ключових слова, що дозволяють задавати відносні розміри: smaller (шрифт зменшується на один розмір) і larger (шрифт збільшується на один розмір щодо батьківського елементу). Отже, якщо розмір батьківського елемента було поставлено як medium. то при вказівці властивості font-size: smaller він стане еквівалентний small. а при вказівці властивості font-size: larger розмір буде відповідати ключовим словом large.

Відносний розмір шрифту можна задавати і в процентах (другий спосіб).


Тоді розмір шрифту цитат буде на 20% більше, ніж у елемента-предка. Те ж саме можна зробити, вказавши розмір шрифту в одиницях виміру em:

Попередження. Зверніть увагу, що для вказівки дрібних значень в CSS потрібно як роздільник використовувати точку (.), А не кому (,), як ми звикли. правило:


працювати не буде через наявність коми в завданні дрібного значення.

Третій спосіб вказати розмір шрифту - задати його в будь-яких одиницях довжини: пікселях, пунктах, сантиметрах або міліметрах. Наприклад, задамо значення в пікселях:

Цей спосіб універсальний з тієї точки зору, що при такому способі завдання розмір шрифту буде однаковим в будь-якому браузері, чого дуже важко домогтися при використанні ключових слів. При завданні розміру в пікселях слід пам'ятати про те, що це відносна величина і розмір букв буде залежати від дозволу екрану.

Також потрібно мати на увазі, що в HTML розмір шрифта дорівнює 3. У CSS це значення medium. тобто тут шкала розмірів симетрична, тоді як в HTML - немає. Тут у наявності деяка невідповідність, але воно не є визначальним. З установкою розміру шрифту є куди більш цікаві моменти - як, наприклад, невідповідність розмірів шрифту, що визначається ключовими словами. Але і їх можна усунути. Як це можна зробити, дізнаєтеся в наступних розділах.

Для порівняння наводимо спосіб завдання розміру шрифту за допомогою CSS і тільки на HTML

Завдання hfpvthf шрифту в HTML і CSS

Схожі статті