Кросс Браузерная подгрузка Шрифтов на форум
Форматы Шрифтов, воспроизводимых Браузерами
Для Начала Нам нужно Иметь нужный файл шрифта в формате ttf
Далее, Идём на страницу Он-лайн конвертера Шрифтов http://www.font2web.com/ указываем Путь к файлу шрифта, жмём Обзор,
затем -
- Получаем Архив с файлами Шрифтов для большинства браузеров, в папке 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)