Лекционный и практический материал по теме Форматирование шрифта с помощью CSS
Свойство CSS font определяет тип шрифта, толщину его линий, размер и стиль.
Разница между шрифтами Serif и Sans-Serif
На рисунке представлены буквы из двух семейств шрифтов: Serif и Sans-Serif. Разницу между ними можно увидеть невооруженным глазом, у шрифта семейства Serif на концах штрихов имеются маленькие засечки. Слово Serif переводится как "засечка", а слово Sans — как "без". Поэтому шрифт sans-serif переводится как "без засечек". При печати лучше использовать шрифты Serif, так как они облегчают чтение. Для компьютерных мониторов лучше использовать шрифты Sans-serif.
Семейства шрифтов CSS
В CSS существует два типа названий семейств шрифтов: · общие семейства — группа семейств шрифтов, имеющих похожий вид ("Serif" или "Monospace") · семейство шрифта — конкретный шрифт ("Times New Roman" или "Arial")
Общее семейство
Семейство шрифтов
Описание
Serif
Times New Roman Georgia
Шрифты Serif имеют засечки на концах штрихов символов
Sans-serif
Arial Verdana
"Sans" означает "без" — эти шрифты не имеют засечек
Monospace
Courier New Lucida Console
Символы имеют одинаковую ширину
Семейство шрифта
Семейство шрифта указывается в свойстве font-family. Свойство font-family должно содержать несколько названий шрифтов на всякий случай. Если браузер (а точнее ОС) не поддерживает первый шрифт в списке (этот шрифт не установлен в ОС), он попытается использовать следующий шрифт из списка шрифтов. Начинайте список шрифтов с желаемого, заканчивайте его названием общего семейства, если указанных вами шрифтов не будет в ОС, браузер выберет доступный шрифт из общего семейства. Заметка: если название се...
Пример
p{font-family:"Times New Roman", Times, serif;} Чтобы увидеть часто используемые комбинации шрифтов, ознакомтесь со списком безопасных веб-шрифтов.
Стиль шрифта
Свойство font-style обычно используется для оформления текста в виде курсива. Свойство имеет три значения: · normal — обычный текст · italic — курсив · oblique — наклонный текст (похож на курсив, плохо поддерживается в браузерах, поэтому обычно отображается курсивом)
Пример
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
Размер шрифта
Свойство font-size задает размер шрифта. Возможность управлять размером шрифта очень важна в веб-дизайне. Однако, не стоит изменять размер параграфа, чтобы сделать его похожим на заголовок, и изменять заголовок, чтобы сделать его похожим на параграф. Используйте правильные теги, например, h1-h6 для заголовков и тег p для параграфов. Значение свойства font-size можно указать в относительных и абсолютных величинах. Абсолютные величины: · Задает абсолютный размер шрифта · Не дает пользо...
Размер шрифта в пикселях
Размер шрифта в пикселях дает вам полный контроль над размером шрифта:
Пример
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} Этот код позволяет изменять размер текста во всех браузерах, кроме Internet Explorer. Размер текста можно изменить с помощью инструмента масштабирования (при этом меняется размер всей страницы, а не только текста).
Размер шрифта в em
Многие веб-мастера используют em вместо пикселей, чтобы избежать проблем с масштабированием в Internet Explorer. Размеры в em рекомендуются W3C. 1em равен размеру шрифта по умолчанию. Размер шрифта по умолчанию равен 16 пикселям. Таким образом, 1em равен 16 пикселям. Размер шрифта в em можно перевести из пикселей по формуле: пиксели/16=em
Пример
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ В этом примере, размер текста в em равен размеру текста в пикселях. Однако, этот способ позволяет масштабировать текст во всех браузерах. К сожалению, в браузере IE можно заметить следующую проблему: при увеличении/уменьшении размера шрифта, он увеличивается/уменьшается больше, чем ожидалось, то есть непропорционально.
Комбинация % и em
Кросс-браузерным решением масштабирования текста является задание размера шрифта по умолчанию для тега body в %:
Пример
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} Мы получили кросс-браузерный код. Он не только одинаково отображается во всех браузерах, но и позволяет масштабировать текст.
Раздел | Информатика |
Класс | - |
Тип | Конспекты |
Автор | Пучкина Т.С. |
Дата | 12.02.2015 |
Формат | docx |
Изображения | Есть |
Поделитесь с коллегами:
Практическая работа №3
Форматирование шрифта
Задание 1
Шрифты.
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
Задание 2
Изменение размера шрифта (пиксели, проценты, em), на каждый из способов изменения размеров по три примера.
Примеры:
h2 {font-size:250%;}
h1 {font-size:40px;}
p {font-size:0.875em;}
Задание 3
Создать два документа, с изменением толщины шрифта
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
И стилем шрифта
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Задание 4
Свойства шрифта одной записью.
p.ex1
{font:15px arial,sans-serif;}
p.ex2{font:italic bold 12px/30px Georgia,serif;}
И создать два своих абзаца со своими параметрами.