Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
7 г. назад

Нестандартные шрифты на сайте с помощью CSS

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

Итак, начнем, конечно, со спецификации CSS. Она сама здесь. Нам нужно только “Font Descriptions and @font-face”:

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

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

  1. Те, которые обеспечивают связь между использованием CSS шрифта и описанием шрифта (у них есть те же самые названия, как соответствующие свойства шрифта CSS).
  2. Ссылки на местоположение данного шрифта.
  3. те, которые далее характеризуют шрифт, чтобы обеспечить связь между описанием шрифта и данными шрифта.

Все описания шрифта определены через @font-face в правиле. Общая форма: 

@font-face {<описание шрифта>}

Разберем пример из спецификации. 

<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>Font test</title>
<style type="text/css" media="screen, print">
@font-face {font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt") }
H1 { font-family: "Robson Celtic", serif }
</style>
</head>
<body>
<h1> This heading is displayed using Robson Celtic</h1>
</body>
</html> 

Тут все просто.

  • font-family: "Robson Celtic" - полное название шрифта.Его можно узнать с помощью программ по работе со шрифтами. И браузер конечно надо научить его искать. Для этого прописываем название шрифта в данной спецификации.
  • src: url("http://site/fonts/rob-celt") - путь к шрифту относительно CSS стиля. Не абсолютный.

К сожалению это решение не кроссбразуерное, правильно использовать нестандартные шрифты на сайте будет так:

@font-face {
   font-family:"Robson Celtic";
   src: url("rob-celt.eot");
   src: url("rob-celt.eot?#iefix") format("embedded-opentype"),
   url("rob-celt.woff") format("woff"),
   url("rob-celt.ttf") format("truetype"),
   url("rob-celt.svg#JournalRegular") format("svg");
   font-weight: normal;
   font-style: normal;
}

Использование Google Fonts

Есть еще интересное решение, которое предстовляет компания Google – Google Font Api. Тут все проще, позволяет снизить нагрузку на сервер, грузя шрифты с серверов Google. Выбираете нужный шрифт, конечно если он бесплатен и есть на сервере. Чаще всего в проектах испольузем шрифты серии PT Sans. Выбираем шрифт, нажимаем кнопку Quick use и получаем следующий код.

<link href='//fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Но есть и другие варианты подключения нестандартных шрифтов на сайте, например через @import:

@import url(http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic);

И вариант ассинхроннной загрузки через javascript:

<script type="text/javascript">
   WebFontConfig = {
      google:{ families: [ 'PT+Sans::latin,cyrillic' ] }
   };
   (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })(); 
</script>

Еще пару лет назад это было проблемой, но теперь ее нет.

Конвертация не стандартных шрифтов

Не расказал про инструмент конвертации TTF шрифтов во все необходимые форматы, для кроссбраузерного решения. Решение для конвертации предлагает сайт www.fontsquirrel.com.

Font Squirrel

P.S. Не забывайте, уважаемые друзья, что у шрифтов есть авторы, и порою лицензии на шрифты емеют коммерческий характер. Убедитесь перед использованием, что шрифт бесплатен или приобретена лицензия на его использование. А то будет у вас, как в студии Лебедева – Незаконное использование шрифта.

Комментарии

#Игорёк06.11.2008 05:00
Я пробывал сделать это на локальном сервере... использовал шрифт Monotype Corsiva но ничего не работает! Помогите как организовать работу. Ответить
#Slam20.11.2008 00:12
ТОже продовал сделать. Не получается
Вот код


Font test

@font-face {
font-family: "dirt2death";
src: url("http://ipod-crew.ru/new/dirt2death")
}
H1 { font-family: "dirt2death", serif }



This heading is displayed using Robson Celtic



Шрифт тут
ipod-crew.ru/new/dirt2death.ttf

чтио неверно? Ответить
#PaLyCH20.11.2008 00:34
Неверно то, что не указано расширение.

@font-face {
font-family: "dirt2death";
src: url("http://ipod-crew.ru/new/dirt2death.ttf")
}
H1 { font-family: "dirt2death", serif }
This heading is displayed using Robson Celtic
Шрифт тут
ipod-crew.ru/new/dirt2death.ttf Ответить
#Snowflake20.11.2008 17:28
с расширением тоже не работает...




Font test

@font-face {
font-family: "dirt2death";
src: url("http://ipod-crew.ru/new/dirt2death.ttf")
}
H1 { font-family: "dirt2death", serif }



This heading is displayed using dirt2death Ответить
#PaLyCH20.11.2008 17:48
Вообще о шрифт называется DIRT2 DEATH, соотвественно неправильно прописанно в стиле оформление
Цитата:
@font-face {
font-family: "DIRT2 DEATH";
src: url("http://ipod-crew.ru/new/dirt2death.ttf")
}
Читайте внимательно текст. Название шрифта и название файла это чаще всего разные вещи. Ответить
#Snowflake20.11.2008 19:11
Спасибо за быстрый ответ, но все равно не работает. Может, какие-то настройки на вебсервере нужно изменить? Mime type добавила, но это не помогло. Ответить
#Slam21.11.2008 16:45
Так у ВАС все работало??? Ответить
#DareD16.12.2008 06:53
А вы не могли бы показать сайт с нестандартным шрифтом? А то слова...

Пробовал решить проблему данным способом уже давно. Не углублялся, но в данном виде подгрузка шрифта не работает. Поправлюсь.. У меня не работает. Может и руки корявые, но факт остаётся фактом.

Да и порой спец-шрифты весят до 200кБ. Как вы думаете, это целесообразно? Помимо графики, кода странички, данных, ваш сайт будет подгружать и 100-200 кб шрифта каждый раз. Проще будет закрыть сайт и отправиться на другой, со СТАНДАРТНЫМ шрифтом, чем ждать, пока загрузится этот. Вот и подумайте.

Я даже подымал на сайте фриланс.ру данный вопрос (нестандартный шрифт на сайте). Из 80 участников обсуждения 80 сошлись во мнении, что это просто геморрой и делать этого не стоит.

Гораздо проще объяснить клиенту, что лучше использовать стандартные шрифты, чем пытаться изобрести велосипед... Ответить
#PaLyCH16.12.2008 12:50
После столь бурного обсуждения, я тоже соглашусь на то, что в данной спецификации нет смысла использовать нестандартные шрифты с помощью CSS. Сайт был на демоплощадке, но уже удален. Действительно факт, но шрифты работали только у меня и у клиента, у нас были шрифты установлены в OC. Попробовал на другом компьютере, конечно не работало. Ответить
#DareD16.12.2008 16:07
Мне понравилось ваше высказывание: "...учите работать дизайнеров". Это на 100% верно!

Я бы даже выделил это крррууупным шрифтом:))) Ответить
#Mope25.03.2009 16:40
Спасибо огромное, все получилось, единственный вопрос: можно ли как-нибудь отказаться от тегов типа мне нужно точное масштабирование текста.
Заранее спасибо
С ув. Александр aka Mope Ответить
#Mope25.03.2009 16:41
Извиняюсь уточню тег, от которого который нужно заменить: H1 Ответить
#PaLyCH25.03.2009 16:44
Не понятен вопрос. Зачем отказываться? Елси можешь задать размер шрифта, можешь масштабируемый в em или фиксированный в px :) Ответить
#Mope26.03.2009 13:06
Ага, спасибо, я вчера сам допёр :) сори за флуд Ответить
#itforweb.com08.04.2009 16:04
как вариант можно попробовать так - itforweb.com/content/e144/Ответить
#Denis25.05.2010 08:22
Файл с расширением .TTF невозможно подгрузить. Эту штуку вроде бы хотят ввести в CSS3, но большинство браузеров не скоро смогут поддерживать подобные требования. Шрифты необходимо переводить в формат EOT (работает с ИЕ), посмотреть примеры и загрузить программу WEFT, можно здесь (www.microsoft.com/typography/web/embedding/).
Для NN свой формат шрифтов, плюс переведенный подгружаемый шрифт нехило весит.

Не знаю только, возможно ли с помощью пхп-скриптов вызывать шрифты. Ответить
#Gallina15.07.2010 17:01
Все получилось и с первого раза) Ответить
#Серафима07.06.2011 11:05
@font-face {
font-family: "Monotype Corsiva";
src: url("http://petshouse.com.ua/fonts/MTCORSVA.TTF")
}


Это вставила и все отлично! СПАСИБО!!!!! Ответить

Добавить комментарий

Наверх