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

К началу


 

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

16923. ТРИ СТАТЬИ ПО ТЕОРИИ СЕКСУАЛЬНОСТИ 813 KB
  ТРИ СТАТЬИ ПО ТЕОРИИ СЕКСУАЛЬНОСТИ Издательство Алетейя г. СПб 1998 г. ПРЕДИСЛОВИЕ АВТОРА К 3му ИЗДАНИЮ Наблюдая в течение десятилетия за тем как была встречена эта книга и какое впечатление она произвела я хотел бы предпослать третьему изданию несколько за...
16924. Экспрессия генов 3.88 MB
  Экспрессия генов. М.: Наука 2000. 000 с. ил. ISBN 5020018902 В монографии рассмотрены современные представления о строении и механизмах функционирования генов прокариот и эукариот а также основные методы их исследования. Книга состоит из двух частей. В первой части обс
16925. ФИЗИОЛОГИЯ СЕРДЦА И СОСУДОВ 797.5 KB
  Работа сердца как насоса, его гемодинам ическая производительность, является одним из решающих факторов, определяющих интенсивность кровотока и, соответственно, уровень снабжения органов и тканей кислородом и питательными веществами. При повышении активности организма, например, при совершении им определенной физической работы
16926. БИОЭЛЕКТРИЧЕСКИЕ ПОТЕНЦИАЛЫ. ПОТЕНЦИАЛ ДЕЙСТВИЯ НЕРВА 64.5 KB
  Тема. БИОЭЛЕКТРИЧЕСКИЕ ПОТЕНЦИАЛЫ. ПОТЕНЦИАЛ ДЕЙСТВИЯ НЕРВА. Вопросы теоретической подготовки: Строение нерва и нервных волокон. Потенциал действия. Динамика изменения ионной проницаемости. Критический уровень деполяризации. Причины абсолютной и относи...
16927. Гуморальная регуляция сердечной деятельности 57.5 KB
  Тема: ГУМОРАЛЬНАЯ РЕГУЛЯЦИЯ СЕРДЕЧНОЙ ДЕЯТЕЛЬНОСТИ. Под гуморальной регуляцией сердца понимают изменение его работы под влиянием кардиоактивных гормонов вырабатываемых железами внутренней секреции и поступающих в сердце с током крови гормональная регуляция или ...
16928. ДЕЙСТВИЕ ПОСТОЯННОГО ТОКА НА НЕРВ 134.5 KB
  ТЕМА ДЕЙСТВИЕ ПОСТОЯННОГО ТОКА НА НЕРВ Вопросы теоретической подготовки: Физический электротон и кабельные свойства нервных волокон. Критический уровень деполяризации и его изменения. Изменение физиологических параметров мембраны при деполяризации
16929. ИНТЕГРАТИВНЫЕ СВОЙСТВА ЦНС (НА ПРИМЕРЕ РЕФЛЕКСОВ СПИННОГО МОЗГА). СУММАЦИЯ В НЕРВНЫХ ЦЕНТРАХ 594 KB
  Раздел ФИЗИОЛОГИЯ ЦЕНТРАЛЬНОЙ НЕРВНОЙ СИСТЕМЫ. Тема. ИНТЕГРАТИВНЫЕ СВОЙСТВА ЦНС НА ПРИМЕРЕ РЕФЛЕКСОВ СПИННОГО МОЗГА. СУММАЦИЯ В НЕРВНЫХ ЦЕНТРАХ Вопросы теоретической подготовки: Клеточное строение рефлекторных дуг спинного мозга. Свойства нервных цент
16930. НЕРВНАЯ РЕГУЛЯЦИЯ РАБОТЫ СЕРДЦА 147 KB
  РАЗДЕЛ. ФИЗИОЛОГИЯ СЕРДЦА И СОСУДОВ. ТЕМА: НЕРВНАЯ РЕГУЛЯЦИЯ РАБОТЫ СЕРДЦА. Работа сердца как насоса его гемодинам ическая производительность является одним из решающих факторов определяющих интенсивность кровотока и соответственно уровень снабжения органов и тк...
16931. ФИЗИОЛОГИЯ СКЕЛЕТНЫХ МЫШЦ. НЕРВНО-МЫШЕЧНАЯ ПЕРЕДАЧА 128.5 KB
  Тема. ФИЗИОЛОГИЯ СКЕЛЕТНЫХ МЫШЦ. НЕРВНОМЫШЕЧНАЯ ПЕРЕДАЧА. Вопросы теоретической подготовки: Физиологические свойства мышечных волокон. Механизм возникновения возбуждения и его проведение в волокнах скелетной мышцы. Типы сокращений мышцы. Двигатель...