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

К началу


 

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

26538. ГНИЕНИЕ МЯСА. УСЛОВИЯ И ФАКТОРЫ, ВЫЗЫВАЮЩИЕ ГНИЕНИЕ МЯСА 21.62 KB
  ГНИЕНИЕ МЯСА. УСЛОВИЯ И ФАКТОРЫ ВЫЗЫВАЮЩИЕ ГНИЕНИЕ МЯСА. Гниение самый опасный вид порчи мяса так как при этом процессе разрушаются белковые соединения и образуются вещества опасные для человека. Из составных частей мяса гниению наиболее подвержены мышечная ткань и субпродукты.
26539. ИЗМЕНЕНИЯ В ЖИРЕ В ПРОЦЕССЕ ПРОИЗВОДСТВА И ХРАНЕНИЯ (ГИДРОЛИЗ,ОКИСЛЕНИЕ, ОСАЛИВАНИЕ) 3.31 KB
  ГИДРОЛИЗ характеризуется присоединением к молекуле жира воды в результате чего она расщепляется на глицерин и жирные кислоты. Данный процесс начинается после разделки мясной туши и извлечения жира. Накопление свободных жирных кислот снижает питательную ценность жира и ускоряет развитие в нем окислительных процессов. ОСАЛИВАНИЕ вид порчи жира характеризующийся накоплением в нем предельных оксикислот.
26540. ИСТОРИЯ ОТЕЧЕСТВЕННОЙ ВСЭ 5.17 KB
  всэ явились общественное производство мяса и мясных продуктов и создание мясной промышленности. В 1925г первые в СССР Правила ветсан осмотра убойных животных исследования и браковки мясных продуктов. 30е годы строительство крупных механизированных мясокомбинатов зарождение молочной и пищевой промышленности в связи с этим кафедры мясоведения реорганизованы в кафедры ВСЭ с основами технологии переработки продуктов животноводства. врачей являются Правила ветеринарного осмотра убойных животных и всэ мяса и мясных продуктов1988 и...
26541. БАКТЕРИЦИДНАЯ ФАЗА МОЛОКА И ФАКТОРЫ, ВЛИЯЮЩИЕ НА ЕЕ ПРОДОЛЖИТЕЛЬНОСТЬ 2.99 KB
  БАКТЕРИЦИДНАЯ ФАЗА МОЛОКА И ФАКТОРЫ ВЛИЯЮЩИЕ НА ЕЕ ПРОДОЛЖИТЕЛЬНОСТЬ. Продолжительность данной фазы при различных температурах молока следующая: при 37С 2 часа при 30С 3 часа при 25С 6 часов при 10С 24 часа при 5С 36 часов и при 0С 48 часов. При нагревании молока до 70С и выше бактерицидные вещества разрушаются и микрофлора попавшая в такое молоко размножается беспрепятственно. На бактерицидную фазу влияют промежуток времени с момента выдаивания до охлаждения молока чем короче этот промежуток времени тем продолжительнее...
26543. ВЕТЕРИНАРНО-САНИТАРНЫЕ ТРЕБОВАНИЯ, ПРЕДЪЯВЛЯЕМЫЕ К БОЕНСКИМ ПРЕДПРИЯТИЯМ 10.71 KB
  Для окраски стен и потолков применяют алкидные краски при этом в разных цехах соответствующей цветовой гаммы. В цехах на каждые 150 м2 пола встраивают краны с горячей и холодной водой. В цехах для приема сточных вод оборудуют покрытые трапами решетками воронки в глубине которых устанавливают сифоны для улавливания грязи грубых частиц. ВОЗДУШНАЯ СРЕДА в производственных цехах температура влажность запыленность бактериальное загрязнение влияет на условия труда людей и на санитарное качество продукции.
26544. ВЕТСАНЭКСПЕРТИЗА, ГИГИЕНА И ТЕХНОЛОГИЯ КОЛБАСНОГО ПРОИЗВОДСТВА. ТЕХНОЛОГИЯ ПРОИ3ВОДСТВА ВАРЕНЫХ КОЛБАС 46.7 KB
  ВЕТСАНЭКСПЕРТИЗА ГИГИЕНА И ТЕХНОЛОГИЯ КОЛБАСНОГО ПРОИЗВОДСТВА. ТЕХНОЛОГИЯ ПРОИ3ВОДСТВА ВАРЕНЫХ КОЛБАС. К вареным колбасам относят изделия изготовленные из мяса подвергнутые обжарке и варке или запеканию мясные хлеба. Вареные колбасы являются самым массовым и распространенным видом продукта.
26545. ВЗЯТИЕ СРЕДНЕЙ ПРОБЫ МОЛОКА ДЛЯ АНАЛИЗА. ОТБОР ПРОБ МОЛОКА, ПОСТУПАЮЩЕГО НА ПЕРЕРАБАТЫВАЮЩИЕ ПРЕДПРИЯТИЯ 11 KB
  ВЗЯТИЕ СРЕДНЕЙ ПРОБЫ МОЛОКА ДЛЯ АНАЛИЗА. ОТБОР ПРОБ МОЛОКА ПОСТУПАЮЩЕГО НА ПЕРЕРАБАТЫВАЮЩИЕ ПРЕДПРИЯТИЯ. От молока сдаваемого индивидуальными сдатчиками пробы отбирают в течение десяти дней из молокомера трубкой и сливают в одну и туже бутылку для составления декадной пробы. ОТБОР ПРОБ МОЛОКА ПРИ ВЫПУСКЕ ЕГО В РЕАЛИЗАЦИЮ.
26546. ВИТАМИНЫ МОЛОКА 10.22 KB
  ВИТАМИНЫ МОЛОКА. Витамины содержатся в молоке в различных количествах что обусловлено поступлением их в организм коровы с кормом интенсивностью синтеза микрофлорой рубца и степенью разрушения при обработке и хранении молока. Среднее содержание витаминов в 100 г молока составляет мг: жирорастворимых А 002 02 D 0002. ВИТАМИН А ретинол.