Нестандартные шрифты на сайте с помощью CSS
Благодаря одному умному и профессиональному дизайнеру, я попался в ловушку. Макет нарисован и согласован. Клиент дотошный. И конечно благодаря дизайнеру, на макете появился нестандартный шрифт. Клиент рвет и мечет, нужно проект закрывать. Как же выйти в данной ситуации победителем?
И так, начнем конечно со спецификации CSS. Она сама здесь. Нам нужно только "Font Descriptions and @font-face"
Описание шрифта обеспечивает мост между спецификацией шрифта автора и данными шрифта, которые являются данными, должен был отформатировать текст и отдавать абстрактных глифов, к которым характеры наносят на карту - фактические масштабируемые схемы или битовые массивы. На шрифты ссылаются свойства таблицы стилей. Описание шрифта добавлено к базе данных шрифта и затем используется, чтобы выбрать соответствующие данные шрифта. Описание шрифта содержит описатели, такие как местоположение данных шрифта по Сети, и характеристики тех данных шрифта. Описатели шрифта также необходимы, чтобы соответствовать свойствам шрифта таблицы стилей к специфическим данным шрифта. Уровень деталей описания шрифта может измениться с только названия шрифта до списка ширин глифа.
Т.е. в нашем случае надо подгрузить шрифт и подружить с ним браузер. Для этого есть следующая спецификация
Описатели шрифта могут быть классифицированы в три типа:
- те, которые обеспечивают связь между использованием CSS шрифта и описанием шрифта (у них есть те же самые названия как соответствующие свойства шрифта CSS),
- Ссылка на местоположения данных шрифта,
- те, которые далее характеризуют шрифт, чтобы обеспечить связь между описанием шрифта и данными шрифта.
Все описания шрифта определены через @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 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
чтио неверно? Ответить
@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 Ответить
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 Ответить
Цитата:
Читайте внимательно текст. Название шрифта и название файла это чаще всего разные вещи. Ответить
Пробовал решить проблему данным способом уже давно. Не углублялся, но в данном виде подгрузка шрифта не работает. Поправлюсь.. У меня не работает. Может и руки корявые, но факт остаётся фактом.
Да и порой спец-шрифты весят до 200кБ. Как вы думаете, это целесообразно? Помимо графики, кода странички, данных, ваш сайт будет подгружать и 100-200 кб шрифта каждый раз. Проще будет закрыть сайт и отправиться на другой, со СТАНДАРТНЫМ шрифтом, чем ждать, пока загрузится этот. Вот и подумайте.
Я даже подымал на сайте фриланс.ру данный вопрос (нестандартный шрифт на сайте). Из 80 участников обсуждения 80 сошлись во мнении, что это просто геморрой и делать этого не стоит.
Гораздо проще объяснить клиенту, что лучше использовать стандартные шрифты, чем пытаться изобрести велосипед... Ответить
Я бы даже выделил это крррууупным шрифтом:))) Ответить
Заранее спасибо
С ув. Александр aka Mope Ответить
Для NN свой формат шрифтов, плюс переведенный подгружаемый шрифт нехило весит.
Не знаю только, возможно ли с помощью пхп-скриптов вызывать шрифты. Ответить
font-family: "Monotype Corsiva";
src: url("http://petshouse.com.ua/fonts/MTCORSVA.TTF")
}
Это вставила и все отлично! СПАСИБО!!!!! Ответить