Русские шрифты для html – Ошибка 404 — Запрашиваемая страница на сайте отсутствует.

31.05.2020 Разное

Содержание

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

Семейства шрифтов

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

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

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:


‘sans-serif’: обычные шрифты без засечек
`Arial, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Helvetica, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Verdana, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trebuchet MS, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Gill Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Noto Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Arial Narrow, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
`Times, Times New Roman, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Georgia, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Palatino, URW Palladio L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bookman, URW Bookman L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`New Century Schoolbook, TeX Gyre Schola, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
`Andale Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier New, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`FreeMono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`DejaVu Sans Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
`Comic Sans MS, Comic Sans, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bradley Hand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Brush Script MT, Brush Script Std, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Snell Roundhand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`URW Chancery L, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
`Impact, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Luminari, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Marker Felt, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trattatello, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правило	serif	sans-serif
Стили
`font-style: normal`	Съешь же…	Съешь же…
`font-style: italic`	Съешь же…	Съешь же…
`font-style: oblique`	Съешь же…	Съешь же…
Насыщенность шрифта
`font-weight: 100`	Съешь же…	Съешь же…
`font-weight: 200`	Съешь же…	Съешь же…
`font-weight: 300`	Съешь же…	Съешь же…
`font-weight: normal`	Съешь же…	Съешь же…
`font-weight: 500`	Съешь же…	Съешь же…
`font-weight: 600`	Съешь же…	Съешь же…
`font-weight: bold`	Съешь же…	Съешь же…
`font-weight: 800`	Съешь же…	Съешь же…
`font-weight: 900`	Съешь же…	Съешь же…
Варианты
`font-variant: normal`	Съешь же…	Съешь же…
`font-variant: small-caps`	Съешь же…	Съешь же…
Растяжение
`font-stretch: ultra-condensed`	Съешь же…	Съешь же…
`font-stretch: extra-condensed`	Съешь же…	Съешь же…
`font-stretch: condensed`	Съешь же…	Съешь же…
`font-stretch: semi-condensed`	Съешь же…	Съешь же…
`font-stretch: normal`	Съешь же…	Съешь же…
`font-stretch: semi-expanded`	Съешь же…	Съешь же…
`font-stretch: expanded`	Съешь же…	Съешь же…
`font-stretch: extra-expanded`	Съешь же…	Съешь же…
`font-stretch: ultra-expanded`	Съешь же…	Съешь же…

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

Навигация по сайту

www.w3.org

CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

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

arial.ttf). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).

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

Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достигнуть за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета. Более подробно с правилами веб-типографики вы сможете ознакомиться в предложенной статье.

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

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

Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

Свойство наследуется.

font-family
Значения:
family-name	Название (имя) семейства шрифтов, например, `Times`, `Courier`, `Arial`. Рекомендуется указывать вместе с базовым семейством.
generic-family	Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon)
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-family: "Times New Roman", Georgia, Serif;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: inherit;
font-family: initial;

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

Свойство наследуется.

font-weight
Значения:
`normal`	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
`bold`	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
`bolder`	Насыщенность шрифта будет больше, чем у предка.
`lighter`	Насыщенность шрифта будет меньше, чем у предка.
`100, 200, 300, 400, 500, 600, 700, 800, 900`	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

Свойство font-stretch выбирает нормальное, сжатое или расширенное начертание символа из семейства шрифтов.

Свойство наследуется.

Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:

font-stretch
Значения:
`ultra-condensed`	Указывает на наиболее сжатый шрифт.
`extra-condensed`	Указывает на второй по сжатости шрифт.
`condensed`	Указывает на сжатый шрифт.
`semi-condensed`	Указывает на немного сжатый шрифт.
`normal`	Значение по умолчанию.
`semi-expanded`	Слегка расширенный шрифт.
`expanded`	Расширенный шрифт.
`extra-expanded`	Второй по расширенности шрифт.
`ultra-expanded`	Максимально расширенный шрифт.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: inherit;
font-stretch: initial;

Когда не существует глифа для заданной ширины, значения normal или condensed отображаются для более узкого начертания символа, в противном случае отображается более широкое начертание. И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:

Рис. 2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

Свойство font-style позволяет выбрать стиль начертания для шрифта. При этом разница между курсивом и наклонным начертанием заключается в том, что курсив вносит небольшие изменения в структуру каждого символа, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта.

Свойство наследуется.

font-style
Значения:
`normal`	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
`italic`	Выделяет текст курсивом.
`oblique`	Устанавливает наклонное начертание шрифта.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;

Рис. 3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

Свойство наследуется.

font-size
Значения:
absolute-size	`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`. В качестве стандартного размера принимается `medium`. В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость.
relative-size	`smaller`, `larger`. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для `xx-small` и `xx-large`.
длина	Размер шрифта устанавливается с помощью положительных значений единиц длины, например, `px`, `em`, как целых, так и дробных.
`%`	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью `em` эквивалентно процентному значению.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;
font-size: inherit;
font-size: initial;

Значения absolute-size
`xx-small`	`x-small`	`small`	`medium`	`large`	`x-large`	`xx-large`
Коэффициент масштабирования
3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML заголовки
h6		h5	h5	h4	h3	h2
HTML размер шрифта
1		2	3	4	5	6	7

6. Относительный размер шрифта: свойство font-size-adjust

Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

Рис. 4. Термины в типографике

font-size-adjust
Значения:
`none`	Не сохраняет `x-height` шрифта.
число	Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта: `c = (a / a ') s` где: `s` = значение размера шрифта `a` = значение аспекта, указанное в свойстве `font-size-adjust` `a '` = значение аспекта фактического шрифта `c` = скорректированный размер шрифта для использования Отрицательные значения недействительны.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис:

font-size-adjust: none;
font-size-adjust: 0.7;
font-size-adjust: inherit;
font-size-adjust: initial;

Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust, чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family. Также могут быть включены значения для свойства font-variant, которые поддерживаются CSS 2.1 — normal или small-caps.

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Синтаксис

font: 12pt/14pt sans-serif;
font: 80% sans-serif;
font: x-large/110% "new century schoolbook", serif;
font: bold italic large Palatino, serif;
font: normal small-caps 120%/120% fantasy;
font: condensed oblique 12pt "Helvetica Neue", serif;

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем могут быть изменены индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях эта же строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим свойством, но не с самим font-family.

font: menu;        /* используются настройки шрифта для системных меню */
font: large menu;  /* используется семейство шрифтов под названием "menu" */

8. Управление синтезом шрифтов: свойство font-synthesis

Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.

Свойство наследуется.

font-synthesis
Значения:
`none`	Запрещает синтез начертаний.
`weight` и/или `style`	По умолчанию свойство принимает значение `font-synthesis: weight style;`. Если указано только `weight`, это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только `style` — синтезируется только курсив.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;
font-synthesis: initial;
font-synthesis: inherit;

По материалам CSS Fonts Module Level 3

html5book.ru

50+ Лучших бесплатных кириллических шрифтов для дизайна

Сегодня выкладываю большую коллекцию лучших шрифтов для дизайна. Да не просто шрифтов, а кириллических (то есть с русскими буквами).Более 50 вариантов. Такие посты надо добавлять в закладки!

Dited

Bender

Furore

Metro

Days

Philosopher

Molot

London

20 DB

Neucha

Cuprum

Zopa

Airport

Fontin Sans Cyrillic

Hattori Hanzo

Bicubik

Hardpixel

PixelPlay

Flow

Zhizn

Cony

Ubuntu Font Family

Movavi Grotesque Black

Liberation Serif

DAN

Хартия

DejaVu fonts

Pacifica

Dimitrina

Danger

St Transmission

Gentium

Brava

Metro

GrandNover

Каори

Сумкин шрифт

Тот самый шрифт

Барделин

Perforama

Codename Coder Free 4F

Five Minutes

Boldin

Pt Sans

Play

Open Sans

PT Serif

AleksandraC

GardensC

Web Serveroff

UPD: Вышла вторая часть статьи, Ещё 50 лучших бесплатных кириллических шрифтов для дизайна. Там тоже подборка что надо. Спешите видеть.

Да, кстати, смотрите так же статейку про уникальные шрифты от Google Fonts

Naikom » Дизайн » Типографика

naikom.ru

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

HTML шрифты: работаем со шрифтами в HTML

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

Что может делать HTML со шрифтами?

Содержание статьи:

Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в HTML, давайте дадим определение термину шрифт. Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста. Такое определение термину шрифт нам дает Википедия.

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

В любом HTML документе у шрифта есть три характеристики: гарнитура, цвет и размер. Шрифты в HTML играют очень важную роль. Именно от того, как отображается шрифт в документе зависит его читабельность. На самом деле отображение шрифта на HTML страницах в браузере зависит от операционной системы и, собственно, самого браузера, в котором открыт HTML документ.

Это вызвано тем, что каждая операционная система поддерживает свой собственный набор шрифтов, который любой пользователь может изменять по своему усмотрению. Также любой браузер имеет собственные настройки, в которых указаны шрифты, которые будут использованы по умолчанию. Изменять шрифты в HTML мы можем двумя способами: средствами самого языка HTML и средствами каскадных таблиц стилей.

В данной записи мы поговорим о том, как работать со шрифтами при помощи HTML. На данный момент этот подход считается не совсем правильным из-за того, что есть CSS и именно при помощи CSS консорциум рекомендует оформлять HTML документы. Но знать о том, как можно работать со шрифтами в HTML нужно, поэтому давайте рассмотрим более подробно, что предлагает HTML для изменения: цвета, гарнитуры и размера шрифта

HTML тэги для работы со шрифтами

Сразу отметим, что HTML для работы со шрифтами предлагает нам использовать два тэга: тэг <basefont> и тэг . Первый HTML тэг считается устаревшим и не рекомендован к использованию, так как в дальнейшем он будет удален из стандарта (уже удален и многие браузеры его не поддерживают). Также тэг <basefont> относится к одиночным HTML тэгам. Когда браузер встречает <basefont> он не создает HTML элемент, так как данный тэг служит для изменения характеристик шрифтов всей HTML страницы.

Второй тэг используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

HTML атрибуты для работы со шрифтами

Оба тэга для работы со шрифтами в HTML имеют одинаковый набор HTML атрибутов: для них доступны все универсальные HTML атрибуты и атрибуты событий. Также у этих тэгов есть три уникальных атрибута:

Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
Атрибут color. Изменяет цвет шрифта в HTML документе.
Атрибут size. Позволяет изменить размер шрифта в документе.

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

Изменяем размер шрифта в HTML

Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем размер шрифта в HTML</h2> font size=»1″ font size=»2″ font size=»3″ font size=»4″ font size=»5″ font size=»6″ font size=»7″ </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем размер шрифта в HTML</h2>

font size=»1″

font size=»2″

font size=»3″

font size=»4″

font size=»5″

font size=»6″

font size=»7″

</body>

</html>

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

Пример изменения размера шрифта в HTML

Но атрибуту size мы можем задавать значения не только в абсолютных единицах, но и в относительных. Мы знаем, что HTML шрифт по умолчанию имеет значения атрибута size равным трем, следовательно, мы можем прибавлять и отнимать от тройки числа так, чтобы в результате получалось целое число не больше семи, создайте HTML докуент по примеру ниже, для этих целей можно воспользоваться бесплатным редактором Brackets:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Относительные размеры шрифта в HTML</h2> font size=»1″ font size=»-2″ font size=»2″ font size=»-1″ font size=»4″ font size=»+3″ font size=»6″ font size=»7″ font size=»+4 </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Относительные размеры шрифта в HTML</h2>

font size=»1″

font size=»-2″

font size=»2″

font size=»-1″

font size=»4″

font size=»+3″

font size=»6″

font size=»7″

font size=»+4

</body>

</html>

Этот документ ничем не отличается от предыдущего, мы точно так же использовали HTML абзацы, чтобы осуществлять перенос строки (хотя могли бы и использовать тэг , о котором мы говорили, когда разбирались с пробельными символами в HTML), изменился текст HTML заголовка, но это не главное, главное то, что мы изменили значение атрибута size и в браузере получили вот такую картину:

Пример изменения размера шрифта в HTML в относительных единицах

Мы видим, что шрифты в документе идут парами, это сделано специально, чтобы продемонстрировать, что значение size=”1” и size=”-2” дадут шрифт одинакового размера и так далее.

Изменяем цвет шрифта средствами HTML

Теперь поработаем с цветом шрифта средствами HTML. Сразу отметим, что HTML не позволяет использовать модель HSV для изменения цвета, поэтому у нас остается только модель RGB, либо использование имени цвета в HTML. Естественно, изменять цвет HTML шрифта мы будем при помощи атрибута color. Откройте удобный для себя редактор, например, JavaScript редактор Sublime Text 3:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем цвет шрифта в HTML</h2> <ul> <li>color=»red»</li> <li>color=»green»</li> <li>color=»blue»</li> <li>color=»blue»</li> <li>color=»blue»</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем цвет шрифта в HTML</h2>

<ul>

<li>color=»red»</li>

<li>color=»green»</li>

<li>color=»blue»</li>

<li>color=»blue»</li>

<li>color=»blue»</li>

</ul>

</body>

</html>

Во-первых, стоит отметить, что мы использовали HTML список для того, чтобы текст не был сплошным. Во-вторых, все HTML атрибуты вы можете использовать вместе.

Пример изменения цвета шрифта в HTML

Из примера видно, что цвет шрифта в HTML нам позволяет изменять атрибут color, для которого можно задавать значения либо при помощи модели RGB, либо при помощи имени цвета. Первый способ предпочтительней, так как за каждым именем скрывается определенный код модели RGB, в каждом браузере цвет, заданный по имени, может отображаться по-разному.

Изменяем гарнитуру шрифт в HTML

И наконец, HTML позволяет нам изменять гарнитуру шрифта при помощи специального атрибута face. Перечислять все доступные гарнитуры нет смысла, а, самое главное, нет возможности. Ниже мы приведем самые распространенные гарнитуры для самых популярных ОС. Отметим, что многие люди, говоря шрифт, имеют ввиду гарнитуру шрифта, в принципе они не далеки от истины, поскольку гарнитура – это самая сложная характеристика шрифта. Создайте документ в любом редакторе, рекомендую вам попробовать IDE NetBeans версии PHP:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем гарнитуру шрифта в HTML</h2> <ul> <li>face=»Arial»</li> <li>color=»green»</li> <li>color=»blue»</li> <li>face=»MS Comic Sans»</li> <li>face=»Tahoma»</li> <li> face=»Comic Sans MS, Tahoma, Arial»</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем гарнитуру шрифта в HTML</h2>

<ul>

<li>face=»Arial»</li>

<li>color=»green»</li>

<li>color=»blue»</li>

<li>face=»MS Comic Sans»</li>

<li>face=»Tahoma»</li>

<li>

face=»Comic Sans MS, Tahoma, Arial»</li>

</ul>

</body>

</html>

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

Пример изменения гарнитуры шрифта в HTML

Обратите внимание на последний элемент списка. В HTML мы можем задать сразу несколько гарнитур для шрифта. Шрифт в документе будет принимать ту гарнитуру, которая указана первой в атрибуте face, если ОС или браузер не могут отобразить шрифт с указанной гарнитурой, то будет попытка отображения шрифта со второй гарнитурой и так далее. Если ни одной из гарнитур нет, то браузер отобразит текст с гарнитурой шрифта, заданной в настройках по умолчанию. И это всё работает до тех пор, пока пользователь не настроит свой браузер так, чтобы он отображал шрифт со своей собственной гарнитурой, не используя те значения, которые указаны в HTML или CSS.

Приоритет тэгов <basefont> и

Мы очень подробно рассмотрели тэг и коротко поговорим про <basefont> и приоритеты между этими тэгами. Отметим, что ни один современный браузер уже не понимают тэг <basefont>, поэтому пример, приведенный здесь, будет не информативным и для его работы вам необходимо будет найти старый браузер:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <basefont face=»Times New Roman» size=»7″ color=»Black»> <h2>Приоритет basefont и font</h2> <ul> <li>face=»Times New Roman» size=»1″ color=»Black»</li> <li> face=»Arial» color=»red» size=»5″</li> <li> face=»Times New Roman» color=»green» size=»5″</li> <li> face=»Verdana» color=»blue» size=»5″</li> <li> face=»Comic Sans MS» color=»#AAA» size=»5″</li> <li> face=»Tahoma» color=»#FF00FF» size=»5″</li> <li> face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Приоритет basefont и font</h2>

<ul>

<li>face=»Times New Roman» size=»1″ color=»Black»</li>

<li>

face=»Arial» color=»red» size=»5″</li>

<li>

face=»Times New Roman» color=»green» size=»5″</li>

<li>

face=»Verdana» color=»blue» size=»5″</li>

<li>

face=»Comic Sans MS» color=»#AAA» size=»5″</li>

<li>

face=»Tahoma» color=»#FF00FF» size=»5″</li>

<li>

face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</li>

</ul>

</body>

</html>

Если вы найдете старую версию какого-нибудь браузера, который еще поддерживает <basefont>, то увидите, что шрифт первого элемента списка будет иметь характеристики, указанные для тэга <basefont>, а все остальные элементы списка будут иметь характеристики шрифта, которые указаны в атрибутах их тэгов .

Далее мы приведем список шрифтов (приведем в виде HTML таблицы), которые доступны в самых популярных операционных системах.

HTML шрифты для Microsoft Windows

Эти шрифты поддерживают все компьютеры с операционной системой Windows

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
Andale Mono	Arial	Arial Bold
Arial Italic	Arial Bold Italic	Arial Black
Comic Sans MS	Comic Sans MS Bold	Courier New
Courier New Bold	Courier New Italic	Courier New Bold Italic
Georgia	Georgia Bold	Georgia Italic
Georgia Bold Italic	Impact	Lucida Console
Lucida Sans Unicode	Marlett	Minion Web
Symbol	Times New Roman	Times New Roman Bold
Times New Roman Italic	Times New Roman Bold Italic	Tahoma
Trebuchet MS	Trebuchet MS Bold	Trebuchet MS Italic
Trebuchet MS Bold Italic	Verdana	Verdana Bold
Verdana Italic	Verdana Bold Italic	Webdings

HTML шрифты для UNIX систем

Эти шрифты поддерживают все машины под управлением UNIX подобных ОС:

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Times
Utopia

HTML шрифты для Mac OS

Шрифты ниже поддерживаются всеми машинами, на которых установлена ОС Mac седьмой версии и выше.

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
American Typewriter	Andale Mono	Apple Chancery
Arial	Arial Black	Brush Script
Baskerville	Big Caslon	Comic Sans MS
Copperplate	Courier New	Gill Sans
Futura	Herculanum	Impact
Lucida Grande	Marker Felt	Optima
Trebuchet MS	Verdana	Webdings
Palatino	Symbol	Times
Osaka	Papyrus	Times New Roman
Textile	Zapf Dingbats	Zapfino
Techno	Hoefler Text	Skia
Hoefler Text Ornaments	Capitals	Charcoal
Gadget	Sand

zametkinapolyah.ru

Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

Начиная верстать макет, необходимо в частности указать в CSS используемые на странице шрифты. Зачастую различными шрифтами дизайнер набирает не только основной текст страницы, но и разнообразные заголовки, логотипы, вензеля.

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

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

Если дизайнер использовал шрифты второй категории для создания, наример, логотипа или крупных статичных заголовков, можно не колеблясь использовать прием замены текста картинкой. Недостаток применения этого приема — негибкость. В случае изменений в тексте придется переделывать картинку и менять CSS (например, если размеры новой картинки не совпадут со старой).

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

Но как же отличить шрифты первой группы от второй? Ясно что на набор шрифтов, установленный непосредственно на твоем компьютере опираться нельзя! Давайте разбираться.

Стандартные шрифты

Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.

Для того, чтобы страничка могла отображаться так, как задумал дизайнер, в любой операционной системе, существует возможность в CSS свойстве font-family задавать несколько шрифтов, перечисленных через запятую.

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:

Имя семейства шрифтов по выбору. Например «Times new Roman», «Arial» и другие. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
Родовое (общее) семейство. В спецификации определены следующие родовые семейства:
- serif — шрифты с засечками на концах;
- sans-serif — шрифты без засечек;
- cursive — шрифты курсивного начертания;
- fantasy — декоративные шрифты;
- monospace — моноширинный шрифт(с буквами одинаковой ширины).

Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.

Но не все так просто. Покопаем детальнее.

В поисках Web-безопасных шрифтов

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

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Шрифты поддерживающие кириллицу

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

Ниже приведена таблица соответствий шрифтов.

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Helvetica CY	Nimbus Sans L	Sans-serif
Arial	Helvetica CY	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco CY	* (см. ниже)	cursive
Courier New	* (см. ниже)	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal CY	* (см. ниже)	Sans-serif
Times New Roman	Times CY	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica CY	* (см. ниже)	Sans-serif
Verdana	Geneva CY	DejaVu Sans	Sans-serif

* в колонке напротив шрифта означает, что родных кириллических эквивалентов Windows шрифта у операционной системы не имеется. Но в то же время есть большая вероятность, что в операционной системе установлен непосредственно сам этот шрифт.

Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:

body { font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; }

body {

font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif;

}

Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.

Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!

До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.

Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.

Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.

Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.

Любой верстальщик рано или поздно сталкивается с моментом, когда дизайнер использует в макете шрифт, не входящий в перечень «безопасных»;. Но это еще не повод бить тревогу! Например, дизайнеры очень часто используют на макетах шрифт Tahoma, который не входит в этот перечень. Правильно построенная линейка шрифтов открывает возможность использовать не только Tahoma, но и другие шрифты. Все большее количество дизайнеров пользуются этой возможностью и грамотный верстальщик должен об этом знать.

Ниже приведена дополнительная таблица шрифтов, которые не входят в перечень «безопасных», но могут использоваться на макетах.

Windows	Mac OS	Родовое семейство
Lucida Console	Monaco	Monospace
Lucida Sans Unicode	Lucida Grande	Sans-serif
Tahoma	Geneva CY	Sans-serif

А если без кириллицы?

Для англоязычных текстов вышеприведенные таблицы имеют несколько другой вид.

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Gadget	Nimbus Sans L	Sans-serif
Arial	Helvetica	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco	TSCu_Comic	cursive
Courier New	Courier	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal	Rekha	Sans-serif
Times New Roman	Times	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica	Garuda	Sans-serif
Verdana	Geneva	DejaVu Sans	Sans-serif

Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.

Шрифты, которые не входят в перечень «безопасных», но могут использоваться на макетах, лучше определять шрифтовыми CSS стеками на основе этой таблицы.

Windows	Mac OS	Unix/Linux	Родовое семейство
Lucida Console	Monaco	—	Monospace
Lucida Sans Unicode	Lucida Grande	Garuda	Sans-serif
Palatino Linotype	Palatino	Garuda**	Sans-serif
Tahoma	Geneva	Kalimati	Sans-serif

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

** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).

Выводы:

Абсолютно безопасных шрифтов не существует. Условно безопасными можно назвать следующие шрифты:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Безопасные CSS стеки, учитывающие поддержку кирилицы в шрифтах, можно посмотреть в статье Безопасные шрифтовые CSS стеки для рунета.
Если на странице поддержка кириллицы не важна, используем CSS стеки из статьи Безопасные шрифтовые CSS стеки для англоязычных текстов.

Информация была взята с ресурса http://www.xiper.net/

lamp-dev.ru

Comments

Leave Comment

Русские шрифты для html – Ошибка 404 — Запрашиваемая страница на сайте отсутствует.

CSS: шрифты

Семейства шрифтов

Стили шрифтов

Навигация по сайту

CSS-шрифты

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

2. Насыщенность шрифта: свойство font-weight

3. Ширина шрифта: свойство font-stretch

4. Начертание шрифта: свойство font-style

5. Размер шрифта: свойство font-size

6. Относительный размер шрифта: свойство font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

8. Управление синтезом шрифтов: свойство font-synthesis

50+ Лучших бесплатных кириллических шрифтов для дизайна

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Что может делать HTML со шрифтами?

HTML тэги для работы со шрифтами

HTML атрибуты для работы со шрифтами

Изменяем размер шрифта в HTML

Изменяем цвет шрифта средствами HTML

Изменяем гарнитуру шрифт в HTML

Приоритет тэгов <basefont> и <font>

HTML шрифты для Microsoft Windows

HTML шрифты для UNIX систем

HTML шрифты для Mac OS

Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

Стандартные шрифты

В поисках Web-безопасных шрифтов

Шрифты поддерживающие кириллицу

А если без кириллицы?

Выводы:

Leave a Comment
Отменить ответ

Русские шрифты для html – Ошибка 404 — Запрашиваемая страница на сайте отсутствует.

CSS: шрифты

Семейства шрифтов

Стили шрифтов

Навигация по сайту

CSS-шрифты

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

2. Насыщенность шрифта: свойство font-weight

3. Ширина шрифта: свойство font-stretch

4. Начертание шрифта: свойство font-style

5. Размер шрифта: свойство font-size

6. Относительный размер шрифта: свойство font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

8. Управление синтезом шрифтов: свойство font-synthesis

50+ Лучших бесплатных кириллических шрифтов для дизайна

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Что может делать HTML со шрифтами?

HTML тэги для работы со шрифтами

HTML атрибуты для работы со шрифтами

Изменяем размер шрифта в HTML

Изменяем цвет шрифта средствами HTML

Изменяем гарнитуру шрифт в HTML

Приоритет тэгов <basefont> и <font>

HTML шрифты для Microsoft Windows

HTML шрифты для UNIX систем

HTML шрифты для Mac OS

Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

Стандартные шрифты

В поисках Web-безопасных шрифтов

Шрифты поддерживающие кириллицу

А если без кириллицы?

Выводы:

Leave a Comment Отменить ответ

Leave a Comment
Отменить ответ