Способи установки розміру шрифтів в CSS

У минулому році або близько того нарешті з'явився інтерес до проблеми оформлення тексту в середовищі Інтернет, і тепер у багатьох статтях і на форумах обговорюють запропоновані методи і теорії. Часто в кінці кінців переважної стає ідея про те, що гарне оформлення вимагає ретельного контролю розміру шрифту і висоти рядка. Але ж це ж Веб: середа, де читач може мати такий же контроль, що і дизайнер - і результатом має бути те, що текст в Веб, хоча і по волі дизайнера, повинен бути гнучкий в різних браузерах і ОС.

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

Ми досягнемо нашої мети традиційним методом проб і помилок. Згідно новаторську роботу Оуена Брігса зразка 2002-го року, я створив набір прикладів для дослідження, що складається з 6 кроків і 161 скриншота. Ну так що, почнемо?

тестовий набір

Для тестування використовувалася розмітка , Що складається з двох колонок - основний колонки зліва і врізки справа. Був обраний шрифт Arial з метою відповідності різним операційним системам і платформ.

Тестування проводилося на браузерах: Safari 2, Firefox 2 і Opera 9.5α на Mac OS X Tiger, а також Internet Explorer 6 (IE6) і Internet Explorer 7 (IE7) на Windows XP із згладжуванням шрифтів ClearType. Ясно, що це не вичерпний список браузерів, операційних систем і засобів візуалізації, але вони сьогодні відповідає потребам більшості користувачів.

Кожен з браузерів і ОС був запущений з настройками за замовчуванням. На кожному кроці перевірялося то, як браузер відображає маленький, середній, великий і величезний розміри шрифту, що відповідає 90%, 100%, 110% і 120% збільшення тексту в тих браузерах, де ця можливість існує.

вихідний приклад

Спочатку потрібно було впевнитися в тому, що всі браузери налаштовані однаково. В вихідному прикладі видно, що розмір тексту за умовчанням в кожному з браузерів дорівнює 16px і текст всюди масштабований однаково. Ця умова виконується, якщо не застосовані ніякі стилі (відмінні від стилів для браузерів за замовчуванням).

Розмір тексту в пікселях - крок 1

Розмір тексту за замовчуванням в вихідному прикладі - хороша відправна точка, але для більшості людей (дизайнерів, замовників і їх клієнтів) 16px занадто багато для тексту за замовчуванням. У нашому прикладі розмір основного тексту був зменшений до 14px, а тексту в урізанні до 12px. На першому кроці ми всього лише задали розмір тексту в пікселях:

.bodytext p {font-size: 14px; } .Sidenote {font-size: 12px; }

В внаслідок Safari і Firefox і раніше, щоб змінити масштаб текст, тоді як IE6 та IE7 - немає. Розмір тексту в Opera і IE7 можна змінити, використовуючи інструмент масштабування сторінки, який збільшує як текст, так і зображення - тобто масштабує сторінку цілком.

Розмір тексту в em - крок 2

Хоча частка браузерів, яким користувачі віддають перевагу, різна для кожного окремо взятого сайту, можна з упевненістю сказати, що IE6 поки використовується більшістю людей. Таким чином, встановлюючи розмір тексту в пікселях, ми не даємо багатьом людям можливості його масштабувати. Ще один аргумент - від користувачів IE7, у яких також не буде можливості змінити розмір шрифту без використання інструменту масштабування.

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

.bodytext p {font-size: 0.875em; / * 16x0.875 = 14 * /} .sidenote {font-size: 0.75em; / * 16x0.75 = 12 * /}

за результатами видно, що розмір тексту при стандартних налаштуваннях браузерів відповідає розміру, заданому в пікселях. Ці результати також є доказом того, що текст, вказаний в em, може легко масштабуватися в будь-якому з браузерів. Однак IE6 та IE7, хоча і прийнятно, але все-таки перебільшують розміри тексту при його масштабуванні.

Основний текст, вказаний у відсотках - крок 3

Рішенням проблеми неправильного масштабування тексту в IE6 та IE7 є установка величини шрифту тега body в процентах. Так що, залишивши em для решти вмісту, протестуємо наступні стилі:

body {font-size: 100%; } .Bodytext p {font-size: 0.875em; } .Sidenote {font-size: 0.75em; }

за результату видно, що відмінності між IE6, IE7 та іншими браузерами стали менш вираженими. Тепер всі браузери відображають і масштабують текст однаково.

Установка висоти рядка в пікселях - крок 4

Останні статті про оформлення тексту у веб, такі як стаття «Установка шрифту в веб по сітці базових ліній» підкреслюють, що для гарного оформлення необхідна вертикальна сітка. Таким чином, потрібна чітка узгодженість відстаней між рядками по вертикалі, якої можна досягнути за допомогою правильно вивіреної висоти рядка. В результаті висота рядка повинна бути однаковою всюди, яким би не був розмір шрифту (для того щоб висота рядка або вертикальна сітка залишилися незмінними, не залежними від розміру шрифту).

Для нашого прикладу підходяща висота рядка - 18px. Застосуємо ці параметри до основного тексту:

body {font-size: 100%; line-height: 18px; } .Bodytext p {font-size: 0.875em; } .Sidenote {font-size: 0.75em; }

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

На жаль, результати говорять нам про те, що висота рядка в 18px що не масштабується в IE6 та IE7, в той час як розмір шрифту змінюється, і при збільшенні масштабу - рядки жахливо туляться один до одного.

Установка висоти рядка в em - крок 5

Якщо з пиксель не не вийшло - будемо використовувати em. Змінимо висоту рядка в наших стилях:

body {font-size: 100%; line-height: 1.125em; / * 16x1.125 = 18 * /} .bodytext p {font-size: 0.875em; } .Sidenote {font-size: 0.75em; }

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

Проблема з Моноширинний шрифтами в Safari - крок 6

Ви, напевно, помітили невелику проблему в Safari: моно шрифт основного тексту відображається по-різному. Для тексту в пікселях Safari вірно відображає моноширинний шрифт такого ж розміру, як і пропорційний шрифт, що оточує його. Якщо текст вказано в em, то Safari відображає моноширинний текст набагато менше навколишнього його тексту. Відмінності з'являються внаслідок різного розміру шрифта для пропорційного (16px) і моноширинного шрифту (13px). У Safari 3a на OS X такої проблеми не існує.

Ви можете вирішити, що невеликий моноширинний текст не дуже-то завадить вам і вашим читачам, що використовують Safari. Для тих, хто не може чекати, альтернативним рішенням є установка шрифту в пікселях для Safari.

Додамо умовний коментар в наші стилі, для того щоб встановити розмір в пікселях для всіх браузерів, крім IE6 та IE7 (конструкція [if! IE] змушує IE / Win ігнорувати укладену в коментарі розмітку).

<Style type = "text / css"> body {font-size: 100%; line-height: 1.125em; } .Bodytext p {font-size: 0.875em; } .Sidenote {font-size: 0.75em; } </ Style> <! - [if! IE]> -> <style type = "text / css"> body {font-size: 16px; } </ Style> <! - <[endif] ->

за результату видно, що тепер шрифт у всіх браузерах виглядає однаково, включаючи і моно текст в Safari 2.

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

висновок

Нашою метою був пошук способу завдання параметрів тексту, який би дозволив дизайнерам зберегти ретельний контроль над його оформленням, не жертвуючи при цьому можливостями користувача з налаштування тексту. Ми протестували різні одиниці вимірювання в популярних браузерах. Вказуючи величину шрифту і висоту рядка в em, з процентними значеннями для елемента body (і з додатковою умовою для Safari) було показано, як надати тексту акуратність і чіткість, при цьому залишаючи можливість його масштабування. Ці методи ви можете з упевненістю покласти в свій багаж знань і використовувати в якості одного з кращих способів по установці параметрів тексту в CSS, який задовольняє як дизайнерам, так і користувачам сайтів.

додаток

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

Стаття заснована на оригінальній статті online-журналу A List Arart «How to Size Text in CSS» .