[SVG]Свой шрифт для сайта

Тема в разделе "Инструкции и основная информация", создана пользователем Next, 17.03.16.

  1. Next

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

    Сообщения:
    5.643
    Репутация:
    73
    Рейтинг:
    +565 / -0
    Что такое @font-face?

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

    Шрифты могут быть в форматах

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    ,

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    ,

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    ,

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    и

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    :
    • 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.
    Как видим, у нас есть минимум три типа файлов, которые нужно подгружать.

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

    Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис —

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    . Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.
    Но из опыта знаю, что далеко не все шрифты принимает белочка.
    Лучше всего воспользоваться сайтом

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

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

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    - можно скачать шрифт (без @font-face) и подключить к сайту, только от них.

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    - можно скачать и просто шрифт, и @font-face.

    Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

    - мне больше всех нравиться. Можно скачать и просто шрифт, и @font-face, и подключить от них.

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

    Я не буду описывать подключение с сайта со шрифтами (если посмотрели ссылки указанные выше, поймете), будем использовать шрифт, который уже скачан. Заливаем его к себе на сайт, предварительно создав для него папку например так:
    Код:
    /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.

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

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

    Похожие темы
    1. Next
      Ответов:
      1
      Просмотров:
      203
    2. Next
      Ответов:
      3
      Просмотров:
      216
    3. Next
      Ответов:
      0
      Просмотров:
      165
    4. Ярослав
      Ответов:
      0
      Просмотров:
      148
    5. NumberOne
      Ответов:
      1
      Просмотров:
      95
    Загрузка...