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

К началу


 

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

44739. Основы психологии и педагогики 615 KB
  Основной целью изучения учебной дисциплины «Основы психологии и педагогики» является формирование у будущих специалистов универсальных психолого-педагогических компетенций, обеспечивающих эффективное решение широкого круга социально-личностных и профессиональных задач в сфере любой профессии.
44740. Горная выработка. Проведение горных выработок 446.5 KB
  Горнодобывающая промышленность является одной из отраслей экономики России, на основе которой развиваются металлургия, химическая промышленность, машиностроение, электродобывающая и другие отрасли.
44741. Минимизация и факторизация булевой функции 896.5 KB
  При переходе от кубической записи булевой функции к функциональной схеме переменные одного куба объединяются знаком конъюнкции, т.е. являются входами одной схемы И, все кубы объединяются друг с другом знаком дизъюнкции
44742. Экранирование магнитного поля 119 KB
  Конструкторно-технологические мероприятия по локализации возможности образования условий возникновения каналов утечки информации за счет побочных электромагнитных излучений и наводок в технических средствах обработки и передачи информации сводятся к рациональным конструкторно-технологическим решениям
44743. Cинус, косинус и тангенс острого угла прямоугольного треугольника 1.24 MB
  Цели урока: Образовательные: Проверить знания умения и навыки учащихся по темам Применение теории подобия треугольников при решении задач и Соотношение между сторонами и углами прямоугольного треугольника.
44744. Cинус, косинус и тангенс острого угла прямоугольного треугольника 10.57 MB
  Тип урока: подготовка к контрольной работе. Вид урока: традиционный Цели урока: Образовательные: Совершенствование навыков решения задач на применение теории подобия треугольников и соотношений между сторонами и углами прямоугольного треугольника; подготовить учащихся к контрольной работе.
44745. Значение синуса, косинуса и тангенса для углов 30, 45 и 60 градусов 3.18 MB
  Тип урока: комбинированный изучение нового материала закрепление изученного Вид урока: традиционный Цели урока: Образовательные: Научить учащихся вычислять значения синуса косинуса и тангенса углов 300 450 и 600; формировать навыки решения прямоугольных треугольников используя синус косинус и тангенс острого угла. Оборудование урока: доска с меловыми записями рабочие тетради учебник Геометрия 79 кл.
44746. Значение синуса, косинуса и тангенса для углов 30, 45 и 60 градусов. Часть 2 9.42 MB
  Формировать мировоззрение (правильные представления), связанное с ролью математики в науке, исследовании закономерностей реального мира, общностью математических абстракций, общностью отражения материального мира в математических понятиях
44747. Умножение десятичных дробей 36 KB
  Формировать умения умножать десятичные дроби, выполнять умножение десятичных дробей на 0,1; 0,01; 0,001; продолжить работу формированием навыка выполнять умножение десятичных дроби