Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Лекционный и практический материал по теме "Форматирование шрифта с помощью CSS"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Лекционный и практический материал по теме "Форматирование шрифта с помощью CSS"

библиотека
материалов

Практическая работа №3
Форматирование шрифта

Задание 1

Шрифты.


p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

hello_html_m205cb6c5.png

Задание 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;}


hello_html_72e16e1a.png

И создать два своих абзаца со своими параметрами.


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Краткое описание документа:

Свойство 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 должно содержать несколько названий шрифтов на всякий случай. Если браузер (а точнее ОС) не поддерживает первый шрифт в списке (этот шрифт не установлен в ОС), он попытается использовать следующий шрифт из списка шрифтов.

Начинайте список шрифтов с желаемого, заканчивайте его названием общего семейства, если указанных вами шрифтов не будет в ОС, браузер выберет доступный шрифт из общего семейства.

Заметка: если название семейства шрифта состоит из нескольких слов, оно должно быть помещено в кавычки, например, font-family: "Times New Roman".

Названия шрифтов перечисляются через запятую:

Пример

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 можно указать в относительных и абсолютных величинах.

Абсолютные величины:

·       Задает абсолютный размер шрифта

·       Не дает пользователю возможности изменять размер шрифта

·       Абсолютные размеры используются тогда, когда точно известно разрешение устройств, на которых будет отображаться сайт

Относительные величины:

·  Размеры шрифта зависят от соседних/родительских элементов

·  Дают пользователю возможность изменять размер шрифта в браузере

Если не указать размер шрифта, будет подставлено значение по умолчанию, которое равно (для параграфов) 16px (16px=1em).

Размер шрифта в пикселях

Размер шрифта в пикселях дает вам полный контроль над размером шрифта:

Пример

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;}

Мы получили кросс-браузерный код. Он не только одинаково отображается во всех браузерах, но и позволяет масштабировать текст.

 

Автор
Дата добавления 10.03.2015
Раздел Информатика
Подраздел Конспекты
Просмотров257
Номер материала 435961
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх