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

К началу


 

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

22312. Управління користувачами в невеликій мережі 28 KB
  Створюючи групи і додаючи в них користувачів ви визначаєте громадянство які мають права доступу до комп'ютерів в мережі. Крім того ви дістаєте можливість розділити користувачів на групи що володіють різними правами доступу. Двічі клацніть на значку Користувачі і паролі щоб відкрити діалогове вікно. Дозвольте користувачам обов'язково указувати свої ім'я користувача і пароль для чого встановите відповідний прапорець єдиний на вкладці Користувачі діалогового вікна Користувачі і паролі Перейдіть на вкладку Додатково.
22313. Використовування Windows 2000 Professional як Web-сервер 36 KB
  World Wide Web це компонент Internet що відповідає за надання інформації розваг служб а також проведення всіляких електронних транзакцій через Internet. І Internet і World Wide Web доступні цілодобово сім днів в тиждень. За всіма прекрасними декораціями World Wide Web ховається велика кількість серверів що містять Webсторінки і додаткові файли; такі сервери називаються Webвузлами.
22314. Управління Web-вузлом з допомогою Особистий диспетчер Web 53 KB
  Якщо необхідно зробити якісь дії по адмініструванню Webвузла наприклад припинити Webсервер або проконтролювати статистику відвідин Webвузла не обійтися без додаткового інструменту. До складу Windows 2000 Professional входить дуже проста у використовуванні утиліта Особистий диспетчер Web яка дозволяє управляти Webвузлом а також настроювати і змінювати параметри роботи мережних служб. Запуск утиліти Особистий диспетчер Web Для того щоб користуватися утилітою Особистий диспетчер Web необхідно її запустити.
22315. Управління Web-вузлом за допомогою Internet Services Manager 38 KB
  Для того щоб дістати більш широкі можливості управління Webвузлом подумайте про використовування засобу Internet Services Manager. Адміністрування Webвузла за допомогою цього інструменту надає вам масу можливостей. Ви можете змінити таке положення клацнувши правою кнопкою миші нижче за стандартний Webвузол вибравши команду Властивості після чого вибравши необхідний вміст.
22316. Підтримка FTP-вузла 44.5 KB
  Коли ж ви встановите службу FTP File Transfer Protocol видалені користувачі зможуть працювати з файлами на вашому FTPсервері. Вживання FTP відкриває видаленим користувачам доступ тільки до тих файлів і директорій які розташовані в структурі каталогів FTPсерверу. Установка служби FTP.
22317. Загальні відомості про Інтернет 46.5 KB
  З технічної точки зору Інтернет є об'єднанням комп'ютерів розташованих в різних країнах в одну комп'ютерну мережу. В даний час до мережі Інтернет підключені десятки мільйонів комп'ютерів користувачами яких є сотні мільйонів людей і число їх постійно росте. За допомогою комп'ютера підключеного до Інтернету можна побувати на екскурсії в Лувре або британському музеї взнати прогноз погоди вчинити покупки зробити замовлення на квиток одержати консультацію безпосередньо у фірмі Microsoft привітати друга з днем народження поспілкуватися з...
22318. Основні послуги Інтернету 87.5 KB
  Служба WWW World Wide Web система взаємозв'язаних електронних документів які зберігаються на Webсерверах. Окремі документи тут називаються Webсторінками. Одні Webсторінки містять гіперпосилання на інші Webсторінки ті у свою чергу на треті і т. Webсторінки можуть розміщуватися як на одному Webсервері так і на різних.
22319. Електронна пошта 46.5 KB
  Також як і в телефонних мережах клієнти комп'ютерних мереж називаються абонентами. Для кожного абонента на одному з мережних комп'ютерів виділяється область пам'яті електронний поштовий ящик. Пароль відомий тільки абоненту і мережному комп'ютеру.
22320. Визначення комп’ютерної мережі, еволюція комп’ютерних мереж, компоненти мережі, можливості мережі 66 KB
  Визначення компютерної мережі еволюція компютерних мереж компоненти мережі можливості мережі. Мережі грають величезну роль в світі комунікацій. В справжньому розділі я надам вам достатньо відомостей про мережі при цьому не обрушуючи на вас маси подробиць які вам просто не потрібні на першому етапі знайомства з мережами. Навіщо необхідні стільки книг Це зв'язано з тим що мережі це дуже могутній інструмент що дозволяє розширити можливості вашого комп'ютера.