Работа с новыми шрифтами

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

Форум » Система UcoZ » Инструкции uCoz и uWeb » Работа с новыми шрифтами

Работа с новыми шрифтами

02.11.2012 в 15:16

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

Полное описание

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

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

Итак, начнём.

Для примера, мы взяли шрифт PT_Sans.
Загружаем шрифт на сайт, через Файловый менеджер, получаем ссылку.
Затем, заходим в Управление дизайном » Таблица стилей (CSS) и вставляем следующий код:

Code

@font-face {font-family: PT_Sans;
src: url(/fonts/PT_Sans.ttf);}

@font-face позволяет подключить новый шрифт. В font-family указываем название нашему новому шрифту. Затем, в src указываем ссылку на шрифт, которую мы получили после загрузки через Файловый менеджер.

Пол дела сделано. Мы уже загрузили новый шрифт на сайт и подключили его, остаётся его прикрепить (чтобы мы могли уже им любоваться).
Допустим, у нас есть текст:

Quote

На нашем сайте вы найдете инструкции, которые помогут вам освоить систему uCoz и uWeb. Мы регулярно обновляем ресурс новыми инструкциями и обзорами. Благодаря нам вы поднимете свой начальный уровень знаний html&css, а также самой системы uCoz и uWeb до, как минимум, среднего уровня!

Мы всегда готовы помочь вам, и ответим на любые интересующие вас вопросы. Создайте отдельную тему с вашим вопросом в Вопросах по uCoz и uWeb и мы обязательно ответим на него.

Давайте же прикрепим к этому тексту новый шрифт. Делаем следующее.

Нам нужно заключить этот текст под блок и получается у нас так:

Code

<div class="testfont">На нашем сайте вы найдете инструкции, которые помогут вам освоить систему uCoz и uWeb. Мы регулярно обновляем ресурс новыми инструкциями и обзорами. Благодаря нам вы поднимете свой начальный уровень знаний html&css, а также самой системы uCoz и uWeb до, как минимум, среднего уровня!

Мы всегда готовы помочь вам, и ответим на любые интересующие вас вопросы. Создайте отдельную тему с вашим вопросом в Вопросах по uCoz и uWeb и мы обязательно ответим на него.</div>

testfont можете поменять на своё. Затем, в Таблице стилей (CSS) вставляем следующее:

Code

.testfont {font-family: PT_Sans;font-size:16px;}

Готово! В результате у нас должен получится такой текст:

Живой пример: CeofiN.com

UPD 17.03.2012 20:50

Для кроссбраузерности (чтобы новые шрифты отображались во всех браузерах) нужно загрузить несколько форматов одного шрифта, для их получения можно воспользоваться сервисом Font Squirrel. После чего нужно заменить код:

Code

@font-face {font-family: PT_Sans;
src: url(/fonts/PT_Sans.ttf);}

на

Code

@font-face {font-family: 'PT Sans';
   src: url('/fonts/PT_Sans.eot');
   src: local('PT Sans'), url('/fonts/PT_Sans.woff') format('woff'),url('/fonts/PT_Sans.ttf') format('truetype'), url('/fonts/PT_Sans.svg#PTSans-Regular') format('svg');}

Форум » Система UcoZ » Инструкции uCoz и uWeb » Работа с новыми шрифтами

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям