12782

Шрифты. Семейство шрифта

Практическая работа

Информатика, кибернетика и программирование

Шрифты На этой лабораторной работе вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том что конкретный шрифт выбранный для webсайта может отображаться только в том случае если этот шрифт установлен на PC с которого выполняется доступ к этому webса...

Русский

2013-05-03

18.13 KB

3 чел.

Шрифты

На этой лабораторной работе вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:

  •  font-family
  •  font-style
  •  font-variant
  •  font-weight
  •  font-size
  •  font

Семейство шрифта [font-family]

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.

Список шрифтов может выглядеть так:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

  •  Показать пример 

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style используется для определения начертания шрифта со значинием normal, italic или oblique.

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

В примере все заголовки <h2> будут показаны курсивом italic.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

  •  Показать пример 

Задание: для свойства font-style рассмотрите все возможные значения, применяя его для заголовков первого уровня.

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра.

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

  •  Показать пример 

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Значения для выражения жирности шрифта включают в себя: число  (100-900  для описания веса шрифта. 100-самый тонкий шрифт, 900-самый жирный, 400-обычный) или ключевые слова normal (соответствующее числовому значению 400), bold (700),  bolder (определяет следующее большее значение жирности) lighter (определяет следующее меньшее значение жирности).

h1 {font-family: arial, verdana, sans-serif;}

p {font-family: arial, verdana, sans-serif; font-weight: bold;}

  •  Показать пример 

 Задание:  в приведенном примере поменяйте значение bold в теге <p> на bolder, а в тег <h1> добавьте свойство font-weight со значением 200.

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пиксели и проценты) для описания размера шрифта. На лабораторной работе мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1.5em;}

  •  Показать пример 

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Также для изменения значения шрифта используют ключевые слова, которые основываются на способе расчета размера браузером. Доступны следующие ключевые слова : xx-small, x-small, small, medium, large, x-large, xx-large.

Задание:  в приведенном примере для тега <h1> измените 30px на xx-large, а для <p> - medium. Поэкспериментируйте со значениями.

Сокращённая запись [font]

Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле.

Например, вот четыре строки описания свойств шрифта для <p>:

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Используя сокращённую запись, код можно упростить:

p {

font: italic bold 30px arial, sans-serif;

}

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Задание: отформатируйте “Text” следующим образом. Для «тела» документа примените свойства: семейство шрифтов со значениями Georgia, Times, serif; размер шрифта 1em; жирность lighter; стилем italic. Для заголовков первого и второго уровня семейство шрифтов : Arial, Helvetica, sans-serif. Причем для первого уровня заголовка установите размер шрифта 150% и жирностью bold, а для второго - 130% и жирностью 500 и стилем normal. Для всех свойств шрифта используйте его сокращенную запись.

Резюме

Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь.

К началу


 

А также другие работы, которые могут Вас заинтересовать

26726. Муниципальное образование как объект и субъект управления 40.5 KB
  Муниципальный район объединяет несколько смежных поселений или поселений и пространств между ними межселенных территорий которые находятся вне границ Городской округ имеет полномочия и муниципального района и городского поселения. В сельских поселениях включающих два и более населенных пункта в муниципальных районах выделяются административные центры поселения где расположены органы МС.: территорию поселения составляют исторически сложившиеся земли независимо от их формы собственности и целевого назначения включая прилегающие земли...
26727. Природные, исторические, национальные, социально-демографические, экономические особенности муниципальных образований 27 KB
  Экономическую основу местного самоуправления составляют находящееся в муниципальной собственности имущество средства местных бюджетов а также имущественные права муниципальных образований. Органы местного самоуправления от имени муниципального образования самостоятельно владеют пользуются и распоряжаются муниципальным имуществом. В соответствии с Гражданским кодексом органы местного самоуправления вправе создавать муниципальные предприятия и учреждения. К собственным доходам местного бюджета могут относиться: средства самообложения граждан...
26728. Характеристика муниципального хозяйства 27.5 KB
  Субъектами местного хозяйства выступают домохозяйства предприниматели органы местного самоуправления представительства от местного населения в виде различного рода общественных или профессиональных организаций. Цель хозяйства благоустройство социальное благосостояние местного сообщества Специфика муниципального хозяйства: носит черты частного хозяйства использование муниципальной собственности; имеет общественный характер население является заказчиком муниципальных услуг; является подрядчиком выполняя государственные...
26729. Сущность бюджетного федерализма 32.5 KB
  Сущность бюджетного федерализма. Для обновления бюджетного устройства РФ необходим пересмотр сложившихся отношений между бюджетами различных уровней. России федеральному государству с трехуровневой бюджетной системой необходимо бюджетное устройство основанное на принципах бюджетного федерализма под которым понимается система налоговобюджетных взаимоотношений органов власти и управления различных уровней на всех стадиях бюджетного процесса. Реализация концепции бюджетного федерализма основана на сочетании двух взаимодополняющих тенденций...
26730. Задачи и формы органов местного самоуправления 49 KB
  Задачи и формы органов местного самоуправления. гарантии и права контроль и надзор Классификация органов местного самоуправления По способу образования Выборные Другие формируемые: на добровольной основе с последующим утверждением; на основе назначения; на основе кооптации по установленным нормам. По назначению специализации Общего назначения Специального назначения По полномочиям Исполняющие собственные полномочия Исполняющие отдельные государственные полномочия Исполняющие добровольные полномочия По способу принятия решений...
26731. Организационная структура местной (городской, районной, поселковой) администрации 47 KB
  Организационная структура местной городской районной поселковой администрации. Признаки местной администрации именно как исполнительно распорядительного органа. Согласно законодательству местной администрацией руководит глава местной администрации на принципах единоначалия. Главой местной администрации является либо глава муниципального образования либо лицо назначаемое на должность главы местной администрации по контракту заключаемому по результатам конкурса на замещении указанной должности на срок полномочий определяемый уставом...
26732. Организация труда муниципального служащего. Формирование кадрового резерва 37 KB
  Муниципальным служащим является гражданин Российской Федерации достигший возраста 18 лет исполняющий в порядке определенном уставом муниципального образования в соответствии с федеральными законами и законами субъекта Российской Федерации обязанности по муниципальной должности муниципальной службы за денежное вознаграждение выплачиваемое за счет средств местного бюджета. Помимо оснований предусмотренных законодательством Российской Федерации о труде увольнение муниципального служащего может быть осуществлено также по инициативе...
26733. Этика муниципального служащего 30.5 KB
  Этика муниципального служащего. Дополнительным показателем профессионализма муниципального служащего является выполнение им этических норм. Свод этических правил муниципального служащего это система определенных нравственных стандартов поведения особой социальнопрофессиональной группы обеспечивающей реализацию функций муниципального управления. Он не регламентирует частную жизнь муниципального служащего не ограничивает его права и свободы а лишь определяет нравственную сторону его деятельности устанавливает этические нормы служебного...