Безопасные шрифтовые CSS стеки

Безопасные шрифтовые CSS стеки для англоязычных текстов

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

  • Arial Black
  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Palatino Linotype
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
font-family: "Arial Black", Gadget, "Nimbus Sans L", sans-serif; 
font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif; 
font-family: "Comic Sans MS", Monaco, TSCu_Comic cursive; 
font-family: "Courier New", "Nimbus Mono L", Courier, monospace; 
font-family: Georgia, "Century Schoolbook L", Serif; 
font-family: Impact, Charcoal, Rekha, sans-serif; 
font-family: "Lucida Console", Monaco, monospace; 
font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; 
font-family: Tahoma, Geneva, Kalimati, sans-serif; 
font-family: "Palatino Linotype", Garuda, Palatino, sans-serif; 
font-family: "Times New Roman", "Nimbus Roman No9 L", Times, serif; 
font-family: "Trebuchet MS","Nimbus Sans L", Helvetica, sans-serif; 
font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;

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

Безопасные шрифтовые CSS стеки для рунета

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

  • Arial Black
  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif; 
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; 
font-family: "Comic Sans MS", "Monaco CY", cursive; 
font-family: "Courier New", "Nimbus Mono L", monospace; 
font-family: Georgia, "Century Schoolbook L", Serif; 
font-family: Impact, "Charcoal CY", sans-serif; 
font-family: "Lucida Console", Monaco, monospace; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
font-family: Tahoma, "Geneva CY", sans-serif; 
font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif; 
font-family: "Trebuchet MS", "Helvetica CY", sans-serif; 
font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif; 

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

Подмена текста изображением

Иногда дизайнеры используют красивые (нестандартные) шрифты, например, для заголовков, пунктов меню, эффектных ссылок. Если решено было делать их картинками, тогда воспользуйся техникой замены текста изображением — правило хорошего тона. Метод предложен Джеффри Зельдманом:
с помощью CSS прячем изображения в фон
текст надписи дублируем текстом, который прячем за пределы элемента

<h1>Фирма Рога и копыта</h1> 
h1 { 
	    width: 250px; 
	    height: 100px; 
	    background: url(path-to/logo.png); 
	    text-indent: -9999px; /* прячем текст за пределами заголовка */
	    overflow: hidden; 
	} 

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

Тут могут возникнуть опасения: т.к. пользователь не увидит текст в данном заголовке, не последуют ли штрафные санкции со стороны поисковых систем? Мэт Катс (Matt Cutts) — глава отдела по борьбе с поисковым спамом в Google, по этому поводу сказал:

Использование CSS-подмены текста изображением является допустимой техникой. И Google не будет штрафовать сайт за ее использование, при условии, что соблюдены правила: текст на картинке должен полностью соответствовать заменяемому тексту. Например, если ваша компания называется «Expo Markers», что и изображено на логотипе, и скрытый текст тоже «Expo Markers», то вы можете не беспокоиться. Никакого нарушения правил здесь нет. Но если скрытый текст: «Expo Markers cheap online discount buy online Expo Markers sale …», то есть повод для беспокойства, потому как Google может оштрафовать сайт, или что еще хуже — забанить.

Вывод:
Применяем смело технику, но применяем правильно, чтобы не нарваться.

test