1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Установка @font-face для форума XenForo

Тема в разделе "Советы, руководства и видео-уроки", создана пользователем Skaiman, 21 июн 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Что такое @font-face?

    @font-face это правило CSS, позволяющее использовать свой собственный шрифт в оформлении сайта, даже если он не установлен на компьютере посетителя. Это правило открывает безграничные возможности для веб-дизайнеров. Вы можете использовать любые шрифты, в любых количествах.

    Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:
    • Internet Explorer (все версии) — EOT;
    • Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
    • Opera (начиная с 10) — TTF/OTF;
    • Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
    • Safari (начиная с 3.2) — TTF/OTF.
    Как видим, у нас есть минимум три типа файлов, которые нужно подгружать.

    Где его взять?

    Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис — Шрифтовая белка. Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.
    Но из опыта знаю, что далеко не все шрифты принимает белочка. Можно еще воспользоваться font2web, но там нет настроек и не гарантирую, что шрифт, сконвертируемый, будет с кириллицей.
    Советую посмотреть - Некоторые ресурсы по использованию CSS.

    Как прикрутить?

    Я не буду описывать подключение с сайта со шрифтами (если посмотрели ссылки указанные выше, поймете), будем использовать шрифт, который уже скачан. Заливаем его к себе на сайт, предварительно создав для него папку:
    Код:
    /styles/ВАШ СТИЛЬ/xenforo/fonts/
    В папке должны быть минимум три шрифта с расширением: .eot, .ttf и .woff, так как .otf и .svg, могут не всегда присутствовать, это не страшно.
    Открываем EXTRA.css и в низ дописываем:
    Код:
    /* <----- start FONTS ------->*/
        @font-face {
            font-family: 'ВАШ ШРИФТ';
            src: url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.eot');
            src: url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.ttf') format("truetype"),
                    url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.woff') format('woff'),
                    url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.eot?#iefix') format('embedded-opentype'),
                    url('./styles/ВАШ СТИЛЬ/xenforo/fonts/ВАШ ШРИФТ.svg#ecliptic') format('svg');
            font-style: normal;
            font-weight: normal;
        }
    /* <----- END FONTS ------->*/
    Со шрифтом обычно бывает css файлик и в нем можно посмотреть, что добавить в EXTRA.css.

    К чему прикрутить?

    В принципе куда угодно, где используется шрифт, но просто совет, не надо использовать различные экзотические шрифты для всего форума, пожалейте пользователей.
     
    Alex Gludo и Mirovinger нравится это.
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Шрифт логотипа XF-Russia.ru

    Нашел шрифт, используемый в логотипе сайта XF-Russia.ru

    logo_xfr_1.png

    Это шрифт BeastvsST. Архив можете скачать ниже, а для подключения, действуем по инструкции, описанной выше. В архиве имеется файл fonts.css, отредактируйте пути к файлам шрифта и добавьте в нужный стиль css.
     

    Вложения:

    • beastvsST.zip
      Размер файла:
      68,3 КБ
      Просмотров:
      9
    Lex и Mirovinger нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Есть шрифт Anonymous Pro, который хорошо подходит для отображения кода. Сконвертировал его в веб шрифт и установил на сайте, получилось неплохо:

    Image 11.png

    Установка, как выше, только у меня папка для шрифтов в корне. В EXTRA.css:
    Код:
    @font-face {
        font-family: 'Anonymous Pro';
        src: url('./fonts/Anonymous Pro.eot');
        src: local('☺'), url('./fonts/Anonymous Pro.woff') format('woff'), url('./fonts/Anonymous Pro.ttf') format('truetype'), url('./fonts/Anonymous Pro.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    В Настройках стиля, Элементы ВВ-кодов, ВВ-коды: тег Pre/Code, Текст, Шрифт - 'Anonymous Pro'. Если установлен аддон для подсветки кода, так не прокатит :).
     

    Вложения:

  4. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Шрифт из верхнего топика кривой получился, в хроме плохо отображается. конвертировал здесь, лучше взять от сюда, этот нормально работает.

    Image 12.png
     

Поделиться этой страницей