Подскажите пожалуйста, учусь работать с нестандартными шрифтами, как можно прописать новый шрифт и потом использовать его в верстке ? буду очень признателен если дадите ссылку на хорошие уже существующие мануалы.
5 ответов
Где-то недавно задавался подобный вопрос, общая схема такая:
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
@font-face {
font-family: "тут_имя_шрифта";
src: url("тут_путь_к_шрифту") format('truetype');
}
/*Использовать так*/
font-family: "тут_имя_шрифта";
Попробуй Гуглошрифты http://www.google.com/webfonts/ Мануалы и примеры тут: https://developers.google.com/webfonts/docs/getting_started#Quick_Start
Можно сделать так: http://htmlbook.ru/css/font-face. Но этот вариант поддерживают не все браузеры. Лучший вариант - использовать стандартные шрифты, которые предустановлены на всех системах (Arial, Verdana и т.п.), иначе гарантий, что сайт у пользователя будет выглядедть как задумано, нет. Ну и в случае небольших заголовков можно заменить текст картинкой (надеюсь, подключить шрифт в фотошоп для вас не проблема). В этом случае страдает SEO, т.к. индексироваться поисковиками такой "текст" не будет.
Современные браузеры поддерживают шрифты TTF/OTF/WOFF, но Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).
Подключение шрифта должно выглядеть как-то так:
/* только для Internet Explorer */
@font-face {
font-family: open_sanslight;
src: url('Content/fonts/OpenSans-Light.eot');
}
/* далее для всех остальных браузеров */
@font-face {
font-family: open_sanslight;
src: url('Content/fonts/OpenSans-Light.ttf');
}