Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Кросс Браузерная подгрузка Шрифтов на форум


Кросс Браузерная подгрузка Шрифтов на форум

Сообщений 1 страница 2 из 2

1

исходник.

Кросс Браузерная подгрузка Шрифтов на форум

Форматы Шрифтов, воспроизводимых Браузерами

http://uploads.ru/i/l/X/R/lXRUw.png

Для Начала Нам нужно Иметь нужный  файл шрифта в формате ttf

Далее, Идём на страницу Он-лайн конвертера Шрифтов http://www.font2web.com/ указываем Путь к файлу шрифта, жмём Обзор,
затем -
http://uploads.ru/t/U/P/A/UPAY3.gif

- Получаем Архив с файлами Шрифтов для большинства браузеров, в папке fonts

- Далее эти шрифты - Необходимо перезалить в Администрировании Файлы


Перезаливать нужно 4 файла
В Данном Примере:

Briolin.eot
Briolin.woff
Briolin.ttf
Briolin.svg

Ссылки на Перезалитые файлы вставляем в Код css, устанавливаемый в Начало HTML верх

<style type="text/css">
@font-face {
font-family: 'Conv_Briolin';
src: url('http://hostjs-mybb2011.narod.ru/Font/Briolin.eot?'),
url('http://hostjs-mybb2011.narod.ru/Font/Briolin.woff') format('woff'),
url('http://hostjs-mybb2011.narod.ru/Font/Briolin.ttf') format('truetype'),
url('http://hostjs-mybb2011.narod.ru/Font/Briolin.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

Следом Пропишим тестовый Пример ( , В последствии - убираемый, для Тестирования Шрифта

<style type="text/css">
.demo
{
    font-family:'Conv_Briolin',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:left;
    border:1px solid #666;
    padding:10px;
}
</style>
<div class="demo" style="font-size:25px">
    The quick brown fox jumps over the lazy dog.<br>
                       Съешь ещё этих мягких французских булок.
</div>


ЗЫ: Название Шрифта, применяемое в дальнейших указаниях - Вы Выбираете Сами!, указывая Его при загрузке Шрифта(cм. Первый Код

@font-face {
font-family: 'Conv_Briolin';

В Дальнейшем, при обращении к данному шрифту, font-family:'Conv_Briolin' - используем именно его
ЗЫ2: Знак Вопроса ( после расширения файла .eot и #svgFontName после расширений файла .svg - Не случайны!!


Заливка всех выше приведенных типов файлов есть уже на форуме (Администрирование - Файлы)


Добавлено спустя 4 года 5 месяцевВ Связи с заменой сервисом всех ссылок в залитых на форум в файлах, для работы кода во всех браузерах, в ссылках на шрифт, после считывания из залитого по клику на шрифт
Подправляем во всех считанных ссылках шрифтов, заменяя к примеру(красное): http://mybb.forum4.ru/files/0000/14/1c/12435.eot на реальный адрес вашего сайта, к примеру:  http://forum.mybb.ru

Отредактировано Deff (Пн, 20 Апр 2015 21:36:13)

+6

2

Deff написал(а):

Далее, Идём на страницу Он-лайн конвертера Шрифтов http://www.font2web.com/ указываем Путь к файлу шрифта, жмём Обзор,

У меня данный конвертер отказался работать, воспользовался аналогичным: http://convertfonts.com/

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Кросс Браузерная подгрузка Шрифтов на форум