Подключение собственных шрифтов CSS

Тема в разделе 'CSS', создана пользователем XmP, 10 май 2011.

Статус темы:
Закрыта.
  1. XmP ADD ebx, 110h

    Для того, чтобы подгрузить нестандартный шрифт на веб-странцу нужно сделать следующее.
    Первое установить специальную программу которая преобразует ttf в eot формат,
    что позволит нам потом подключить его
    в css. (программа ***Для просмотра ссылок необходимо войти или зарегистрироваться***)(Windows).

    После установки запускаем программу и затем tools->font to embed и добавляем шрифты которые хотим конвертировать
    (замечание: не все шрифты можно конвертить).
    Затем на панели меню (главное окно) ищим кнопку "Embed" (сразу пере ) "help".
    Появляется окошко в котором указываем путь куда будет сохранен файл, указываем ссылку для какой страницы будет использоваться фонт,
    и ставим галочку показать сразу css в итоге получаем

    Код:
    <STYLE TYPE="text/css">
    <!-- /* $WEFT -- Created by: Unknown (Unknown) on 18.12.2007 -- */
    @font-face {
    font-family: Palatino Linotype;
    font-style:  normal;
    font-weight: normal;
    src: url(file:///c:\PALATIN0.eot);
    }  -->
    </STYLE>
    
    Копируем стиль в stylesheet.css копируем eot файл и меняем src, все готово!

    Так же существует ещё несколько способов, вот этот только для последних версий браузера(Кроме IE):
    PHP:

    @font-face {
       
    font-familyfontName;
       
    srcurl('fontName.ttf');
    }

    И
    PHP:

    body 
    {
       
    font-familyfontName;
    }
    Плюсы:
    + Свои шрифты на страницах без сторонних разработок
    + Поддержка большим количеством браузеров
    + Легкая настройка стиля отображения шрифта через CSS

    Минусы:
    - Используемый шрифт загружается на компьютер пользователя
    -- Проблемы с распространением платных лицензированных шрифтов
    -- Пока шрифт не загрузится на компьютер пользователя(а вес может доходить до пары Мегабайт), будет использоваться стандартный шрифт "по-умолчанию"
    - Отбрасываем из поддержки пользователей с более старыми версиями браузеров
    - Большой вес шрифта
    - 2 файла шрифта для разных браузеров, формата EOT и TTF

    В целом что этой штукой нужно пользоваться очень осторожно и в крайне редких случаях.

    Теги:
    как подключить шрифты подключение шритов CSS CSS1 CSS2 CSS3 CSS4 подключить шрифты нестандартные шрифты подключиеть стандартными средствами CSS яваскрипт ява Javascript
    Admin нравится это.
  2. nikki Новичок

    У меня всегда была проблема как подключить свой шрифт. Знала раньше еще один способ, без конвертирования в другой формат, но тоже не для всех шрифтов он подходил.
    А почему пользоваться следует осторожно? В чем подвох?
    Мне кажется, чем подключать шрифт, легче всё сделать в картинках.
  3. XmP ADD ebx, 110h

    Бывает нужно оформить шрифтом большой текст, а иногда и динамический. Потом без текста на картинках гораздо удобнее.

    Потом ещё можно воспользоваться JavaScript: ***Для просмотра ссылок необходимо войти или зарегистрироваться***
  4. Imareal Ст. модератор

    Это может пригодится, очень редко но может и сейчас. Например для дизайн студий или т.п предпочитающих оформить сайт в индивидуальном стиле
  5. XmP ADD ebx, 110h

    Тема закрыта.:ycard: Если есть дополнения к предложному способу - пишите в ПМ.
    UDP:
    У Linux||Windows||MacOS пользователей разные шрифты.
Статус темы:
Закрыта.

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