Шрифты

Ответы на вопросы

1. Каким свойством можно задать имя шрифта? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Имя шрифта можно задать при помощи свойства font-family. Значением этого свойства служит список названий через запятые. Браузер просматривает список и выбирает первый шрифт, который присутствует на компьютере пользователя (игнорируя остальные). Если ни один шрифт не обнаружен, браузер использует шрифт, определённый в нём по умолчанию.

   Свойство font-family применимо ко всем элементам, передаётся по наследству потомкам. Значение по умолчанию зависит от браузера (и его настроек).

2. Какие ключевые слова можно использовать в качестве названия шрифта? Что они означают и как работают?

   Ответ. В качестве названия можно использовать не только конкретное имя шрифта (такое как Georgia), но и пять ключевых слов, задающих пять базовых семейств:

   • serif (шрифты с засечками, или антиква);
   • sans-serif (рубленые шрифты, или гротески);
   • monospace (моноширинные шрифты);
   • cursive (рукописные шрифты);
   • fantasy (декоративные шрифты).

   Рекомендуется каждый список названий шрифтов завершать одним из этих ключевых слов.

3. Сравните серифные и рубленые шрифты. Приведите примеры. Укажите типичные случаи использования.

   Ответ. Серифные шрифты — это шрифты с засечками (завитушками). Засечки помогают чтению, поэтому серифные шрифты рекомендуются для основного текста. Пример серифного шрифта — Times New Roman.

   Рубленые шрифты — это шрифты без засечек. Рубленые шрифты используют для заголовков и основного текста с маленьким размером шрифта. Пример рубленого шрифта — Arial.

4. Сравните пропорциональные и моноширинные шрифты. Приведите примеры. Укажите типичные случаи использования.

   Ответ. В моноширинных шрифтах ширина каждого символа одинакова, в пропорциональных — разная. Пропорциональный текст читать комфортнее моноширинного, поэтому его используют для основного текста. Моноширинный шрифт используют для записи фрагментов кода.

   Пример пропорционального шрифта — Arial. Пример моноширинного шрифта — Courier New.

5. Сравните рукописные и декоративные шрифты. Приведите примеры. Укажите типичные случаи использования.

   Ответ. Рукописные шрифты имитируют человеческий подчерк, и это основная область их использования (пример — Jikharev). Декоративные шрифты — это шрифты, предназначенные для разного рода украшательств, создания необычных заголовков (пример — Electron).

6. Какие шрифты относятся к неалфавитным? Приведите примеры. Укажите типичные случаи использования.

   Ответ. Неалфавитные шрифты вместо букв, цифр и других привычных типографских знаков содержат упрощённые рисунки на разные темы. Обычно это пиктограммы (миниатюрные изображения по компьютерной или другой тематике) или декоративные элементы (орнаменты, стрелки, маркеры и т. п. изображения). Пример неалфавитного шрифта — Wingdings.

7. Каким рекомендациям должен следовать Web-разработчик, подбирая шрифты для страниц своего сайта?

   Ответ. Самое надёжное, вообще не указывать шрифт, тогда браузер будет строить тексты на странице шрифтом по умолчанию, который гарантированно присутствует на компьютере пользователя.

   Если появляется желание отойти от стандартных шрифтов, нужно заканчивать список “семейным” ключевым словом — оно будет гарантировать читаемость текста при отсутствии указанных перед ним конкретных шрифтов.

8. Каким свойством можно задать насыщенность шрифта? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Насыщенность шрифта можно задавать при помощи свойства font-weight. Чем выше насыщенность, тем шрифт темнее и выглядит более “жирным”.

   Значением свойства является одно из ключевых слов: normal (соответствует числу 400), bold (соответствует числу 700), bolder (темнее, чем у родителя), lighter (светлее, чем у родителя). Кроме того, можно использовать шкалу насыщенности из 9 позиций от 100 до 900. Числа (как и ключевые слова) не определяют конкретной плотности. CSS говорит только, что каждое число соответствует плотности, по крайней мере, не меньшей, чем плотность предшествующего числа.

   По умолчанию работает значение normal, свойство применимо ко всем элементам и передаётся по наследству.

9. Каким свойством можно задать размер шрифта? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Размером шрифта позволяет управлять свойство font-size.

   Размеры можно задавать в предопределённых единицах, предусмотренных семью ключевыми словами: xx-small, x-small, small, medium, large, x-large, xx-large.

   Кроме того, можно использовать любые единицы длины и проценты (вычисляются относительно размера шрифта родительского элемента).

   Можно уменьшать и увеличивать текущий размер шрифта при помощи ключевых слов smaller и larger.

   Значение по умолчанию — medium. Свойство применимо ко всем элементам и передаётся по наследству.

10. Как работают значения, задающие размер шрифта в em?

    Ответ. Значение em работает как проценты, в том смысле, что 1em эквивалентно 100%, то есть равно размеру текущего шрифта.

11. Какая проблема возникает, если размер шрифта задан в пикселах (или абсолютных единицах размера)?

    Ответ. Если размер шрифта задан в пикселах (или абсолютных единицах размера), пользователи IE вплоть до версии IE6 не смогут его увеличить, и это очень плохо с точки зрения добропорядочного интерфейса. В других современных браузерах (IE7 и остальных) такой проблемы нет.

12. Каким свойством можно задавать стиль шрифта? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

    Ответ. Стиль шрифта назначается свойством font-style.

    Значения этого свойства: normal (обычный текст), italic (курсив), oblique (наклонный текст). Обычно курсивные и наклонные шрифты выглядят в браузерах совершенно одинаково.

    По умолчанию работает значение normal, свойство применимо ко всем элементам и передаётся по наследству.

13. Каким свойством можно задавать вариант шрифта? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

    Ответ. Вариант шрифта назначается свойством font-variant.

    Значения свойства: normal (обычный текст), small-caps (капитель — строчные буквы заменяются прописными уменьшенного размера).

    По умолчанию работает значение normal, свойство применимо ко всем элементам и передаётся по наследству.

14. При помощи какого свойства можно задавать все параметры шрифта? Приведите 3 варианта записи значения этого свойства.

    Ответ. Все параметры шрифта можно задать при помощи свойства font. Допустимы три формы записи значения этого свойства.

    Первый вариант:

    

    Стиль, вариант и плотность могут идти в любом порядке или отсутствовать, как и размер строки (вместе с косой чертой). Размер и семейство должны присутствовать обязательно и идти в указанном порядке. Если опустить все необязательные параметры, получится так:

    

    Во втором варианте указывается системный шрифт (никакие другие параметры не допускаются):

    

    В третьем варианте присутствует указание на шрифт родителя (никакие другие параметры не допускаются):

    

15. Как можно задавать высоту строки в свойстве font?

    Ответ. Высота строки (необязательный параметр) задаётся как дополнение к значению размера шрифта в свойстве font и отделяется от него косой чертой, например:

      
    H1 
    {
      font:bold small-caps 2em/1.2 Tahoma,Helvetica,sans-serif; 
    }
          

    Высота строки элемента H1 будет установлена в 2.4em.

    Значение высоты строки вычисляется умножение размера шрифта элемента на коэффициент, записанный через косую черту.

16. Как можно задавать системные шрифты?

    Ответ. Если на гипертекстовой странице желательно смоделировать среду операционной системы (системные кнопки, меню, диалоговые окна и т. п.), то в качестве единственного значения свойства font можно указать одно из следующих ключевых слов:

    • caption (текст на элементах управления)
    • icon (подписи значков)
    • menu (пункты меню)
    • message-box (текст в диалоговых окнах)
    • small-caption (текст на маленьких элементах управления)
    • status-bar (текст в статусной строке)

вверх | возврат