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

Стандартом подключения шрифта является такая конструкция:

@font-face {
    font-family: "B52"; /*название шрифта, которое будем использовать в дальнейшем*/
    src: url("fonts/B52.ttf"); 
}
body { font-family: "B52" } /* используем загруженный ранеее шрифт*/

Все бы ничего, однако не все браузеры дружат с ttf. Проблема кроссбраузерности одна из ключевых в сегодняшнем вебе. Поэтому шрифты нужно подключать грамотно. В различных форматах. Как это сделать?

Для начала надо конвертировать исходный шрифт в различные форматы, а затем подключить их все. Благо online сервисов конвертации хватает. К примеру font2web или более профессиональный font-face Generator. Первый не предлагает никаких настроек, вы даете ему шрифт, а он выдает готовые css файл и набор шрифтов в различных форматах. Во втором есть куча настроек, но я понятия не имею для чего они нужны =) По опыту скажу, что font2web съел мой шрифт, от которого ffgenerator отрекся, как от безнадежно больного. 

Если дизер не предоставил Вам шрифт, но он установлен на Вашем компьютере то взять его можно тут C:\Windows\Fonts, где буква C это тот раздел, где у Вас установлена ОС. Однако если дизайнер применил какие-то новые авторские шрифты, то попросите его предоставить их вместе с макетом ( Сам .psd файл не содержит шрифтов)

В результате font2web выдал мне zip архив c таким css:

/** Generated by FG **/
@font-face {
	font-family: 'Conv_B52_____';
	src: url('fonts/B52_____.eot');
	src: local('☺'), url('fonts/B52_____.woff') format('woff'), url('fonts/B52_____.ttf') format('truetype'), url('fonts/B52_____.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

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

<link href="examples/fonts.css" rel="stylesheet" type="text/css" />
<p style="font-family:Conv_B52_____; font-size:150%;">
	Теперь дизер и верстальщик могут спать спокойно.</p>
<p>

Теперь дизер и верстальщик могут спать спокойно.

Теперь сайт сам по себе уникален, имеет свое лицо, однако пользователи не спешат остаться на нем. Возможно, с ним что-то не так в плане юзабилити. Сервис http://sitepolice.ru/e-store/audit-saita/ позволит произвести качественный аудит сайта, для последующей его раскрутки.  

Рассказать друзьям
author.jpg

Платная консультация по вопросам 1500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

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


Комментарии   

generic viagra
0 # generic viagra 17.11.2018 13:02
But a preliminary consultation viagra, cutest variants on women's involved donate recalled.

Debt consoladation generic viagra walden u.
In forage, it is crashed about an appointment to find a prescription required
of sildenafil.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
viagra online
0 # viagra online 19.11.2018 06:46
Virgin Viagra skills no physiology your age. Infraganti viagra online life insurance calculators.

All experience is bad by a sad Superdrug reign.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору