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

1.2.4 Добавить свой шрифт

Тема в разделе "Для новичков", создана пользователем Георгий Шевченко, 26 фев 2014.

Загрузка
  1. Георгий Шевченко

    Георгий Шевченко Пользователь

    Регистрация:
    07.12.13
    Сообщения:
    44
    Симпатии:
    25
    Версия XF:
    1.4.7
    Как добавить в этот список свой шрифт?
    2014-02-25 23-40-24 Скриншот экрана.png
     
  2. Aheande

    Aheande Read only

    Регистрация:
    07.01.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.2.3
    У меня такой же вопрос, только 1.2.3
     
  3. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Шрифты находятся в js/xenforo/bb_code_edit.js
    Указать новые не составит проблемы судя по коду :)
     
  4. Георгий Шевченко

    Георгий Шевченко Пользователь

    Регистрация:
    07.12.13
    Сообщения:
    44
    Симпатии:
    25
    Версия XF:
    1.4.7
    Спасибо, разобрался!
     
  5. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    А мне поясните пожалуйста.
    Есть шрифт Gregor.
    Как сделать так, что бы он срабатывал в сообщениях?
     
  6. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Можно через настройки стиля. Сейчас, увы, не могу сказать где именно (вроде бы где-то в элементах сообщений).
    А можно через EXTRA.css:
    Код:
    .messageText {
    font-family: Gregor !important;
    }
     
  7. Zlata Jesen

    Zlata Jesen Активный пользователь

    Регистрация:
    06.04.14
    Сообщения:
    83
    Симпатии:
    45
    Версия XF:
    1.5.4
    adder, шрифт "сработает", только если он есть у пользователя на компьютере, а если нет?
    Так что без @font-face не обойтись - сначала загрузить на сервер шрифтовой файл, затем прописать @font-face в CSS и только потом указывать этот шрифт для сообщений.
     
  8. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Да. Надо с @font-face
     
  9. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    Так :), и что же в итоге? Что где прописать и куда залить?
     
  10. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
  11. -ExotiC-

    -ExotiC- Новичок

    Регистрация:
    04.04.14
    Сообщения:
    3
    Симпатии:
    1
    Версия XF:
    1.3.0
    1. Если шрифт с Google Fonts, нужно добавить строчку в xenforo.css
    Код:
    @import url(http://fonts.googleapis.com/css?family=xxxxx);
    Либо использовать @font-face, добавлять тоже в xenforo.css
    Код:
    @font-face {
    font-family: Pompadur; /* Имя шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
    }

    2. В EXTRA.css добавить

    Код:
    .messageText {
    font-family: 'Open Sans', sans-serif;
    }
    Если был использован font-face, то не надо добавлять апострофы ' '
     
    Zlata Jesen нравится это.
  12. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Не стоит трогать xenforo.css.
    Все эти строки могут быть добавлены в EXTRA.css
     
    Mirovinger, Zlata Jesen и -ExotiC- нравится это.
  13. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    Я просто смотрю на реализацию Водяного Знака у Галереи от sonnb. Он как то сделал считывание шрифта.

    1.png
     
  14. Zlata Jesen

    Zlata Jesen Активный пользователь

    Регистрация:
    06.04.14
    Сообщения:
    83
    Симпатии:
    45
    Версия XF:
    1.5.4
    Итак, по теме. Полная и окончательно исчерпывающая инструкция (с исправлением недоработок, на которые я не буду показывать пальцем):

    Шаг 1.
    Ищем и выбираем нужный шрифт, затем скачиваем себе на компьютер файл формата .ttf (не все браузеры его воспримут, но костыли для недобраузеров - это уже отдельный вопрос) Я буду рассматривать пример с гипотетическим шрифтом Zlata Jesen (почему я выбрала название шрифта с пробелами - поймете чуть позднее)

    Шаг 2.

    Закачиваем его себе на сервер, внимательно записываем путь к этому файлу, например: мойсайт.ру/fonts/zlatajesen.ttf

    Шаг 3.
    Скачиваем файл js/xenforo/bb_code_edit.js (adder, спасибо за подсказку!), сохраняем оригинал где-нибудь в безопасном месте и открываем копию (чтобы не начудить!) в Notepad++ или другом (вашем любимом) редакторе кода.
    Не пугаемся! Кажется, что в жизни не разобраться в этой путанице значков, букв и скобок? Без паники! Ищем строчку:

    HTML:
    {Arial:"arial,helvetica,sans-serif","Book Antiqua":"'book antiqua',palatino,serif","Courier New":"'courier new',courier,monospace",Georgia:"georgia,palatino,serif","Sevilla Decor":"Sevilla",Tahoma:"tahoma,arial,helvetica,sans-serif","Times New Roman":"'times new roman',times,serif","Trebuchet MS":"'trebuchet ms',geneva,sans-serif",
    Verdana:"verdana,geneva,sans-serif"}
    Да-да, это как раз то самое выпадающее меню шрифтов в редакторе!
    В нужное место вставляем:

    HTML:
    "Zlata Jesen":"Zlata Jesen",
    Первая часть до двоеточия - это тот текст, что появится в bb-коде после слова FONT, вторая - название шрифта в раскладушке.
    ВАЖНО! Если название шрифта состоит из одного слова, то в кавычки его название ДО двоеточия не берем, а если из двух - то ОБЯЗАТЕЛЬНО берем, иначе вы прибежите потом на форум с воплями "А! Всё сломалось!" После двоеточия кавычки обязательны при любом названии.

    Сохраняемся. Грузим эту самую отредактированную копию файла на сервер. В сообщениях теперь имеется возможность выбрать новый шрифт! Ура... но:

    Шаг 4.
    Идем в админку и добавляем в шаблон extra.css

    Код:
    @font-face {
      font-family: "Zlata Jesen";
      src: local("Zlata Jesen"),
      url(http://мойсайт.ру/fonts/zlatajesen.ttf);
    }
    Шаг 5.

    Хвалим себя за аккуратность и усидчивость и идем писать сообщения новым шрифтом.
     
    Sergey M., Romchik®, Mirovinger и 2 другим нравится это.
  15. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    1. Недобраузеры - это которые?
    2. Ищем строчку - нашёл. Это 11 строка.
    3. Если шрифт Gregor, то вот так должно получится?
    12-04-2014 9-11-06.png

    Или после двоеточия и открытия кавычек название шрифта уже с маленькой должно быть? Вот так Gregor: "gregor",
    Как Georgia:"georgia,palatino,serif" или Tahoma:"tahoma,arial,helvetica,sans-serif"
     
  16. Zlata Jesen

    Zlata Jesen Активный пользователь

    Регистрация:
    06.04.14
    Сообщения:
    83
    Симпатии:
    45
    Версия XF:
    1.5.4
    Ишак, к примеру. Остальные вроде все уже поддерживают этот формат... но вообще стоит проверить.

    Я с расчетом на то, что у разных версий этот файл может отличаться.

    Да. Название шрифта может быть как с маленькой, так и с большой - важно, как вы назовете его в стилях на 4 шаге.
     
  17. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    Сейчас выберу какой нибудь диковенный шрифт и опробую на локалке.
     
  18. Zlata Jesen

    Zlata Jesen Активный пользователь

    Регистрация:
    06.04.14
    Сообщения:
    83
    Симпатии:
    45
    Версия XF:
    1.5.4
    Не проблема) У меня заработал даже Sevilla Decor, смотрите только, чтобы ШРИФТ был с кириллицей!

    И, кстати. У вас, если я не ошибаюсь - после двоеточия пробел. Пробелов быть не должно.
     
  19. eterskov

    eterskov Местный

    Регистрация:
    12.03.12
    Сообщения:
    1.329
    Симпатии:
    384
    Версия XF:
    1.2.3
    А вот смотрите. Имя шрифта вот тут указано: AGReverance Oblique
    12-04-2014 9-28-53.png
    А сам файл, что скачал, имя AGREVEO.ttf
    Какое имя прописывать в строку?
     
  20. Zlata Jesen

    Zlata Jesen Активный пользователь

    Регистрация:
    06.04.14
    Сообщения:
    83
    Симпатии:
    45
    Версия XF:
    1.5.4
    Название файла прописывается в пути к нему и только. А название шрифта - в пункте font-family

    Я обновила предыдущий пост, возможно, вы не видели - пробел после двоеточия (в файле) надо убрать. иначе будет ошибка.
     

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