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 экономит время и облегчает вам жизнь.

К началу


 

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

44218. МОДИФИКАЦИЯ МЕТОДА ОПРЕДЕЛЕНИЯ МИЕЛОПЕРОКСИДАЗЫ ПОЛИМОРФНОЯДЕРНЫХ ГРАНУЛОЦИТОВ ПЕРИФЕРИЧЕСКОЙ КРОВИ ДЛЯ СПЕКТОРОФОТОМЕТРИЧЕСКОЙ ОЦЕНКИ РЕЗУЛЬТАТОВ 2.65 MB
  Цель работы модификация лабораторного метода для спектрофотометрического определения спонтанной активности миелопероксидазы полиморфноядерных гранулоцитов периферической крови человека и его сравнительная оценка с различными лабораторными методами определения активности миелопероксидазы нейтрофилов с точки зрения основных требований предъявляемых к лабораторным методам определения активности ферментов в клинических условиях. Определение активности миелопероксидазы с помощью модифицированного лабораторного метода позволяет оценить спонтанную...
44219. СЕМЕЙНОЕ ЧТЕНИЕ: ПРОБЛЕМЫ ПОДДЕРЖКИ И СТИМУЛИРОВАНИЯ В СОВРЕМЕННЫХ УСЛОВИЯХ 665.5 KB
  Особенно тревожная ситуация сложилась с детским и подростковым чтением проблемы чтения ныне встали в один ряд с важнейшими государственными задачами защиты и обеспечения безопасности российской национальной культуры. Проблемами детского чтения считаются недостаточность специальных знаний у родителей о чтении детей о воспитании и педагогике детей экономические и финансовые причины; и др. В современных условиях очень важно позиционировать значение семейного чтения для каждого человека живущего как в нашей стране так и за рубежом....
44220. Сюжетно-дидактические игры математического содержания в самостоятельной деятельности детей 6-го года жизни 10.48 MB
  Теоретические аспекты использования игровой деятельности детей дошкольного возраста для развития математических представлений Содержание математических представлений детей 6 го года жизни Характеристика самостоятельной деятельности детей шестого года жизни и условия применения в ней сюжетно-дидактических игр математического содержания.
44221. Сюжетно-дидактические игры математического содержания в самостоятельной деятельности детей 6 го года жизни 10.3 MB
  Теоретические аспекты использования игровой деятельности детей дошкольного возраста для развития математических представлений Содержание математических представлений детей 6 го года жизни. Характеристика самостоятельной деятельности детей шестого года жизни и условия применения в ней сюжетно-дидактических игр математического содержания.
44222. Лига Арабских государств и ее роль в Интеграционном процессе арабского мира 358.5 KB
  Следует сказать, что в последние годы объем исследований и научных работ по интеграции арабского мира возрос, однако, до сих пор нет четкого анализа происходящих в этом регионе процессов. Они изучаются, главным образом, с точки зрения роли субъективного фактора, сознательных намерений тех или иных социальных групп, но в них не выделяются закономерности, тенденции, объективные факторы, обстоятельства.
44224. Охорона праці. Методичні вказівки 371 KB
  МЕТОДИЧНІ ВКАЗІВКИ до виконання розділу дипломного проекту Охорона праці Затверджено на засіданні кафедри безпеки життєдіяльності і інженерної екології Протокол № 3 від 30. Харків ХДТУБА 2010 Методичні вказівки до виконання розділу дипломного проекту Охорона праці для студентів спеціальностей....
44225. Влияние лыжного спорта на развитие физических качеств подростков 15-17 лет 505 KB
  Проблема исследования: ухудшение физических качеств школьников не занимающихся спортом. Объект исследования: физические качества школьников 1517 лет. Целью данной работы является сравнительный анализ физических качеств спортсменов лыжников и школьников не занимающихся спортом 1517 лет между собой. Для этого поставлены следующие задачи: изучить литературные источники по данной теме; изучить место лыжной подготовки в системе общего физического воспитания школьников; определить этапы исследования и развития физических качеств у лыжников...
44226. Психологическая реабилитация женщин после развода 2.94 MB
  Изучить особенности состояния женщин 25 – 32 летнего возраста после развода. Выявить особенности реакции на фрустрации, уровни тревоги и депрессии, а так же состояние самооценки женщин после развода. Определить степень потребности их в психологической реабилитации, и на основе изученного теоретического и практического материала внести коррективы в предложенные ранее программы помощи и реабилитации женщин после развода.