Русские шрифты html: Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Слово “шрифт” происходит от латинского scriptum — “написанное”. Развитие письменности началось с передачи содержания сообщений реальными картинками. Затем содержание было абстрагировано, и возник понятный шрифт (иероглифы, клинопись). На следующем уровне абстракции появился алфавитный шрифт. Древние папирусы и надписи позволяют выделить курсив, служивший для повседневного употребления, и каллиграфический книжный шрифт. В латинской письменности наряду с книжным шрифтом имелся и деловой курсив. В III в. возникло унциальное письмо, с сильной тенденцией к закругленным формам. В XII в. сформировался готический шрифт с его ломаными формами. В нем также различают собственно книжный шрифт (textura) и курсив (notura, bastarda), имеющий множество разновидностей. В эпоху гуманизма в Европе возникли шрифты gotico-antiqua, humanistica antiqua, cursiva. /Из Словаря античности/

В современной полиграфии и дизайне количество разнообразных шрифтов исчисляется тысячами. Условно можно попробовать выделить среди них три стилистические группы:

• Классические консервативные шрифты (Garamond, Book Antiqua, Times). Эти шрифты широко используются в Европе уже не одну сотню лет. Они придают тексту и заголовкам строгость, подчеркивая серьезность напечатанного. Как правило, имеют засечки. Такие шрифты обычно используются для набора больших текстов.
• Современные шрифты (Arial, Pragmatica, Impact). Эти шрифты часто помогают обозначить деловой стиль. В основном это так называемые рубленые шрифты (без засечек) в духе эстетического аскетизма.
• Декоративные шрифты. Пожалуй, самая большая группа. Главное назначение этих шрифтов — создание необычных оригинальных заголовков и логотипов. Таких неофициальных, часто игривых шрифтов создано огромное количество, правда, большинство из них не содержит символов кириллицы. Русских декоративных шрифтов относительно немного, почти все сделаны фирмой Para-Type или художниками-одиночками.

Кроме того, существуют шрифты для специальных целей, например, содержащие математические символы (Simbol), ноты, дорожные знаки, элементы орнаментов или просто забавные картинки (Webdings).
Выбор гарнитуры шрифта — дело вкуса каждого дизайнера, но все-таки форма должна соответствовать содержанию. Готов поспорить, что можно разорить адвокатскую контору, оформив ее логотип шрифтом «Comic Sans»

В компьютерном мире шрифты делятся на два основных типа по способу построения символов: растровые и масштабируемые. Разница та же, что и между точечными и векторными изображениями. В файлах масштабируемых шрифтов символы описываются математическими формулами, поэтому при увеличении размера они не теряют плавность линий. Существует два основных стандарта масштабируемых шрифтов: PostScript, применяемый главным образом в издательском деле (использует для построения символов кривые второго порядка, что повышает их качество) и TrueType, получивший очень широкое распространение с выходом операционной системы Windows 3.1.

Но обратимся к главной теме — применению шрифтов в Web-дизайне.
Предположим, что вы решили опубликовать в Интернете свое литературное произведение, когда-то набранное в редакторе Word или еще где-нибудь.

Теги для выделения текста

Если работая с настольной издательской системой вы можете полностью управлять размером, местоположением и начертанием текста, то при создании Web-страницы это невозможно, хотя бы потому, что вы не знаете, какое экранное разрешение и средство просмотра использует ваш читатель. Впрочем, есть возможность задавать размеры шрифтов в условных величинах (1-7), относительно шрифта, установленного у пользователя по умолчанию, соответствующего значению “3”. Делается это при помощи атрибута SIZE тега <FONT>. Хотя, применение этого элемента считается плохим стилем, т.к. если автор не указал конкретно имя шрифта, но указал размер шрифта, то у читателя рабочий шрифт может не обеспечить указанный размер, и страница не будет читаться вообще.

Точный размер шрифта и другие его атрибуты можно задать при помощи каскадных таблиц стилей (CSS). Но о них речь пойдет чуть ниже.

Теперь мы подошли к самому веселому мероприятию — выбору гарнитуры шрифта.Еще пару лет назад HTML вообще не давал нам такой возможности: на выбор был пропорциональный шрифт “по умолчанию” (а это обычно Times) и моноширинный (Courier).

Но не стоит обольщаться — не все так замечательно. Если вы явно указали имя шрифта для русского текста, а у пользователя шрифт с этим именем не содержит русских букв (символов кириллицы) то он увидит какие угодно иероглифы, только не русский текст.
В следующих случаях русская страница не прочтется, если в ней есть, например <FONT FACE = “Arial”> перед русским текстом (без этого тега страница прочтется, т.к. читатель сможет использовать свой русский шрифт по-умолчанию):

1. Английская версия Windows 3. 1 и 3.11. Шрифт Arial есть, но в нем нет русских букв. (Не существует такого понятия, как Script-Cyrillic для шрифтов в Windows 3.1/3.11.) Таких пользователей очень много и сегодня. Они пользуются не-Майкрософтовскими русскими шрифтами.
2. Любая версия Windows 95, кроме локализованной русской или ПанЕвропейской. (Если дополнительно не установлен пакет «MS Multilanguage Support».)
3. UNIX или Macintosh.
   Некоторые авторы думают, что если они включат в список и Windows шрифты, и стандартные русские UNIX шрифты, то все будет в порядке. Это далеко не так. Вот типичное письмо на эту тему из конференции Fido7

   From — Tue Mar 10 10:45:00 1998 Newsgroups: fido7. ru.internet.www Subject: Re: FONT FACE2All, ктo пoльзyeтcя нe-виндoвcкими бpoyзepaми! Гocпoдa и бpaтья пoлyocники, мaкoвцы, aмижники, нaкoнeц… Oтвeтьтe, пoжaлyйcтa, нa вoпpoc — вaши бpoyзepы пoнимaют-тaки этoт тeг Font Face, ecли нeoбxoдимaя пpипиcкa «Helvetica, Geneva» cдeлaнa, или нeт? … как правило что-то из набора arial,helvetica,geneva на unix-платформах присутсвует по умолчанию… Ну, у меня присутствует русская Helvetica и английский Arial. Угадай, что я увижу по font face=»arial,helvetica» ?

4. Netscape 3 под Windows NT
   «Arial» содержит русские буквы, но в Windows NT используются unicode-шрифты, а 3-я версия Netscape не понимает unicode, и страница читаться не будет.

Бывают еще более нелепые случаи, когда автор пользуются какой-нибудь программой автоматизированного создания Web-страниц, вроде всенародно любимого FrontPage, которая без спросу вставляет им FONT FACE = «Arial». Затем этот автор переводит текст из CP-1251 (win), например, в KOI8, готовя KOI-вариант страницы. Такая KOI-страница не прочтется, даже если шрифт «Arial» содержит русские буквы — ничего не поможет. Ведь это шрифт кодировки CP-1251, а текст в кодировке KOI8. Никакие шрифты, входящие в поставку Windows95 не содержат русских букв кодировки KOI8.

Koi8-r — одна из стандартных кодировок русского языка, принятых еще в Советском Союзе на заре развития вычислительной техники. КОИ расшифровывается как код обмена информацией. Цифра 8 обозначает, что этот код 8-разрядный (в отличие от КОИ-7, широко применявшейся на советских вычислительных машинах). Кодировка КОИ-8 основана на созвучии русских букв с их латинскими эквивалентами. В настоящее время она является одной из основных русскоязычных кодировок в операционных системах UNIX. Это вторая по популярности кодировка после CP-1251 (win).

И все-таки, похоже, решение проблемы шрифтов существует. Еще в августе 1996 года с выходом браузера Internet Explorer 3.0 в руках Web-дизайнеров появился новый мощный инструмент - каскадные таблицы (карты) стилей (CSS — Cascading Style Sheets). Таблицы стилей позволяют определить внешний вид всех элементов Web-страницы, который сохраняется при переходе от одной страницы к другой. С помощью таблиц стилей помимо всего прочего можно управлять наборами шрифтов, начертанием символов, их высотой, определяя ее в типографских мерах измерения. Конечно, технология CSS — тема для отдельной большой статьи, поэтому здесь я лишь напомню о синтаксисе определения шрифтов.

В файле (.css) или блоке стилей могут содержаться такие параметры шрифта, как размер, гарнитура, толщина, цвет, межстрочный интервал и т.п.

• Размер шрифта
  Атрибут font-size определяет размер шрифта в пунктах, дюймах, сантиметрах, пикселях или процентах по отношению к базовому размеру, например:

  {font-size: 12pt}

• Название шрифта
  Атрибут font-family определяет название гарнитуры, используемой в тексте. Можно указывать несколько шрифтов через запятую: браузер применит первый из списка, найденный им на компьютере пользователя. Можно указать как конкретное имя шрифта, так и семейство шрифтов. Примеры:

  {font-family: Arial}

  или

  {font-family: Arial, Helvetica}

  или

  {font-family: Arial, Helvetica, sans-serif}

  Но лучше всего просто

  {font-family: sans-serif}

  Приняты следующие семейства шрифтов: serif (с засечками), sans-serif (рубленные), cursive (курсив), fantasy (каприз) и monospace (моноширинные).
  Ссылаясь на гарнитуру, название которой состоит из нескольких слов, необходимо заключить имя в кавычки:

  (font-family: "Courier New"}

• Толщина
  Атрибут font-weight определяет толщину букв в тексте. Можно указать различные степени толщины: extralight (сверхтонкий), light (тонкий), demi-light (полутонкий), medium (средний), demi-bold (полужирный), extrabold (сверхжирный). Пример:

  {font-weight: bold}

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

• Начертание
  Определяется атрибутом font-style, например курсив:

  {font-style: italic}

Приведу пример описания стиля для целого документа

<html>
 <style type="text/css">
  <h6 {font: 25pt 'Times New Roman';
       font-weight: bold;
       color: red}
   h2 {font: 12pt Arial, Helvetica, Sans-serif;
       font-weight: bold;
       color: green}
   p  {font: 10pt Verdana ;
       color: magenta}
   em (margin-top: -101px}>
 </stile>
 <body>
       HTML-текст страницы
 </body>
</html>

Ну, пожалуй, на этом и остановимся пока. Как и в случае с тегом <FONT> во избежание лишних проблем с отображением страницы, лучше не указавать абсолютный размер шрифта (лучше использовать проценты) и конкретные имена шрифтов (лучше указать семейство). В спецификации CSS2 предусмотрена возможность встраивать свои шрифты в HTML-документ, но эта технология еще не получила широкого распространения.

Если гарнитура заголовков в вашем случае имеет большое значение, то конечно придется прибегнуть к дедовскому способу — использовать графические файлы в формате GIF. Что касается использования графики для передачи основного текста, то это будет уже явный перебор (хотя, такие сайты в Сети есть). В любом случае, нужно прислушиваться к чувству меры. Например, не стоит использовать на одной странице более трех разных шрифтов — это считается дурным тоном. Текст на странице должен выглядеть по-возможности контрастно и легко читаться. Что касается кегля: излишне увеличеный шрифт сразу выдает непрофессионализм автора, уменьшенный же размер часто помогает создать впечатление высокой информационной насыщенности текста, но такого текста не должно быть слишком много. Обратите внимание, что в случае использования текстурного фона страницы может потребоваться увелить жирность или размер шрифта, чтобы он не сливался с текстурой. Кроме того, не стоит использовать подчеркнутый текст и текст с отрецательным интерлиньяжем — тяжело читается (это рекоммендация самизнаетекого).

В завершение позволю себе маленькое лирическое отступление. Как и все в этом мире шрифты имеют авторов и являются интеллектуальной собственностью. Большинство шрифтов распространяется на коммерческой основе, и возможно вы, сами того не подозревая, используете в своем творчестве нелегально попавшие к вам шрифты, нарушая тем самым российский Закон об авторских правах. Однако, объектами авторского права являютя файлы шрифта, а не собственно начертания. Никто не запрещает вам нарисовать и распространять шрифт, названный, скажем, вашем именем и точь в точь похожий на какой-нибудь Times New Roman.

Ссылки
www.kiarchive.ru/pub/cyrillic — русские шрифты для различных платформ в различных кодирвках и программное обеспечение для руссификации
icons.simplenet.com - большой архив декоративных шрифтов (латинских)
www.w3.org/pub/WWW/TR/REC-CSS1 — спецификация таблиц стилей W3C

Ссылки для установки шрифты

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

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