Совет 1: Как прописать шрифт

Есть несколько способов задать индивидуальные особенности шрифта какого-либо текстового блока в странице. Одни из них используют исключительно средства HTML, другие - только CSS, третьи - комбинируют возможности обоих языков.
Инструкция
1
Можно указать параметры шрифта, который браузеру следует использовать для отображения того или иного блока текста в странице, непосредственно перед началом этого блока. Для этого достаточно средств языка разметки, без привлечения стилевых описаний элементов документа. Соответствующая HTML-конструкция состоит из открывающего и закрывающего тегов font (<font> и </font>), между которыми и размещается текст. Этот тег позволяет указать имя шрифта в атрибуте face, его цвет (в атрибуте color) и размер (атрибут size). Цвет можно задавать в его текстовом обозначении (например, Blue), но лучше использовать шестнадцатеричные коды (например, #0000FF вместо Blue), так как с их помощью можно более точно подобрать нужный оттенок. Размер шрифта здесь задается в относительных единицах - вам нужно указать число в диапазоне от 1 до 7. Образец текста с заданными таким способом параметрами шрифта:<font color="Navy" face="Verdana" size="5">Образец текста</font>
2
Другой способ - воспользоваться атрибутом style. Его можно указывать во многих тегах, в том числе формирующих строчные или блочные области с текстом в теле документа. Вот пример с тегом, формирующим один параграф текста:<p style="font: 700 20px/12 Verdana;">Образец текста</p>Здесь число 700 - это свойство font-weight, а 20px - font-size. По эффекту они практически дублируют друг друга - задают размер букв. Разница лишь в том, что font-size указывает размеры в абсолютных единицах (px либо em), а font-weight в относительных, т.е. увеличивает или уменьшает размер этого текстового блока относительно заданного для всего документа в целом. Как вы понимаете, использовать оба одновременно в одном стилевом атрибуте нет смысла, здесь они объединены только в качестве примера. Число 12, указанное через дробь после абсолютного размера, задает высоту строк в этом параграфе. А Verdana - это, конечно, имя используемого шрифта.
3
Однако указание параметров шрифта непосредственно в тегах элементов страницы сейчас используется редко. Как правило, описания шрифтов выносятся в CSS-блоки, а в тегах указываются только ссылки на них - в атрибутах class или id. Образец этого типа указания параметров шрифта:<style type="text/css">
.paraFont {font: 20px/40 Verdana;}
</style><p class="paraFont">Образец текста</p>
4
Если особого разнообразия шрифтов в странице нет, то можно задать параметры, например, для всех тегов <p> и не указывать ссылок на стилевое описание ни в атрибуте class, ни в id. В этом случае предыдущий образец можно упростить до такого вида:<style type="text/css">
p {font: 20px/40 Verdana;}
</style><p>Образец текста</p>

Совет 2: Как задать свой шрифт в html

Шрифт – неотъемлемая часть веб-дизайна, придающая сайту характерный стиль. Качественный текст на странице должен выглядеть гармонично, сочетаться с остальными элементами сайта и при этом способствовать лучшему восприятию информации. При помощи языка разметки HTML и каскадных таблиц CSS можно настроить практически любые параметры, способствующие достижению максимальной эффективности страницы.
Вам понадобится
  • - файл шрифта в формате TTF.
Инструкция
1
Для использования набора шрифтов, установленных на компьютере, можно воспользоваться параметром font-family каскадных таблиц стилей. Для этого введите следующий код для нужного элемента:

Текст



Данная команда выведет заголовок второго уровня h2 текстом гарнитуры Arial.
2
Если вы хотите использовать собственный шрифт, его предварительно необходимо загрузить на хостинг и включить при помощи соответствующей команды. Файлы TTF включаются следующей командой:



Атрибут font-family в данном случае задает название гарнитуре шрифта, а src: url(font.ttf) указывает путь к файлу TTF.
3
После включения элемента можно использовать его для отображения текста:

Текст



Данная команда отвечает за вывод необходимого шрифта font курсивом в заголовке второго уровня. Если браузер пользователя не поддерживает обработку файлов TTF, будет использоваться указанный после первой запятой системный шрифт (в данном случае Verdana).
4
Некоторые браузеры не поддерживают загружаемый TTF. Например, Internet Explorer 8 для отображения текста использует формат EOT. Для таких обозревателей сконвертируйте исходный TTF при помощи многочисленных сервисов и включите полученную гарнитуру в параметр @font-face аналогичным образом.
5
Если вы хотите импортировать нужный вам файл с другого ресурса, воспользуйтесь командой @import, которую необходимо прописать вверху документа CSS:

@import url(http://адрес_шрифта)
Видео по теме
Обратите внимание
Файл, содержащий необходимый шрифт, не должен иметь большой размер, поскольку он способен замедлить загрузку страницы, что отразится на скорости показа содержимого.
Совет полезен?
Существует большое количество интернет-ресурсов, позволяющих создать собственный шрифт или воспользоваться уже готовыми. Среди наиболее популярных стоит отметить сервис Google Web Fonts.
Источники:
  • Конвертер TTF в EOT
  • Google Web Fonts
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500