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

К началу


 

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

37084. Структура классного часа 22.78 KB
  При подготовке к классному часу классный руководитель должен выполнить следующее:  Определение темы классного часа формулировка его целей исходя из задач воспитательной работы с коллективом;  Тщательный отбор материала с учетом поставленных целей и задач исходя из требований к содержанию классного часа;  Составление плана подготовки проведения классного часа;  Подбор наглядных пособий музыкального оформления подготовку помещения создание обстановки благоприятной для рассмотрения вопроса для откровенного...
37085. СЦЕНАРИЙ КЛАССНОГО ЧАСА О ДРУЖБЕ 80.5 KB
  Недалеко уйдете в дружбе если не расположены прощать друг другу мелкие недостатки. Ларошфуко Истинная дружба есть забвение самого себя для того чтобы жить только в другом. Направо пойдешь друга потеряешь.
37086. Сценарий классного часа, посвященный победе под Сталинградом 29 KB
  Чтец: Сороковые роковые Военные и фронтовыеГде извещенья похоронныеИ перестуки эшелонные. Сороковые роковыеСвинцовые пороховыеВойна гуляет по РоссииА мы такие молодые Чтец: 1942 год. Чтец: Выход к Волге и захват Сталинграда мог обеспечить фашистским войскам успешное продвижение на Кавказ к его нефтяным богатствам. Чтец: Кроме того захват Сталинграда разделил бы фронт наших войск надвое отрезал центральные области от южных а главное дал бы возможность гитлеровцам обойти Москву с востока и взять ее.
37087. Литературно-музыкальная композиция «Сталинградская битва. Курская дуга» 134.5 KB
  Курская дуга Цели:расширять представления учащихся о Сталинградской битве и Курской дуге формировать чувство патриотизма любви к Родине чувство гордости за свою страну на примере героических поступков людей в военное время воспитывать уважительное отношение к старшему поколению памятникам войны.Война гуляет по РоссииА мы такие молодые Год 1941 июнь Страна жила мирной жизнью надеясь что пожар войны который разгорелся в Европе не затронет нашу страну. ИюньТогда ещё не знали мыСо школьных вечеров шагаяЧто завтра будет первый день...
37088. Сценарий классного часа «Экскурсионный день, проведенный в Новодевичьем монастыре» 160 KB
  По патриаршей грамоте 1598 года полным названием монастыря было: Пречестная Великая обитель Пречистыя Богородицы Одигитрии Новый Девичий монастырь. Первое о чем хочется рассказать это об истории Новодевичьего монастыря. Витает птицей в синем небе дух святойВ полёте всё он зорким оком озираетИ тишину монастыря его покойОн верной службой день и ночь оберегает. Таким образом в 1523 году из великокняжеской казны было выдано 230 килограммов серебра на сооружение монастыря.
37089. Сценарий классного часа для 1 класса «Что такое дружба?» 54 KB
  Слайд 1 Ребята давайте поговорим о школьной дружбе. Слайд 2 Иногда говорят: Друзья не разлей вода. Как вы понимаете это выражение Что же такое дружба Слайд 3 Давайте прочитаем стихотворение и узнаем как на этот вопрос отвечают другие. Дружить должны все на свете: И звери и птицы и дети Слайд 4 А вот так слово толкуется в словаре В.
37090. Что такое школьная дружба 56 KB
  Оформление доски Ход мероприятия 1 этап Ребята давайте поговорим о школьной дружбе. 2 этап Иногда говорят: Друзья не разлей вода. Как вы понимаете это выражение Что же такое дружба 3 этап Давайте прочитаем стихотворение и узнаем как на этот вопрос отвечают другие. Дружить должны все на свете: И звери и птицы и дети Так что же такое дружба 4 этап А вот так слово толкуется в словаре В.
37091. Башкортостан – гордимся мы историей твоей! 22.02 KB
  Самая большая и красивая среди них красавица Агидель. И мы хотим рассказать вам историю о том как появилась наша Агидель. Роли: Агидель Рафикова Ашак Мутигуллин Джигит Салимгареев Друзья джигита Арсланов Давлетшин Ахметзянов Ведущий Шайхуллина. У седого Урала имелась дочь красавица Агидель.