Перейти к содержимому
  • Установка новых шрифтов на сайт

       (19 отзывов)

    Евгений Зубов
    • 33 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2015_12/567f026074038_3.5.4.mp4.bb2a70062e32ba365d692ae527e53829.mp4 11 До 15 минут display: none; https://creatura.club/uploads/ Средняя сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом видеоуроке мы рассмотрим добавление и удаление веб-шрифтов в программе Adobe Muse. Заходим в программу, здесь у меня уже есть текстовый фрейм, где написано muse.digitalmakers.ru. Для добавления или удаления веб-шрифтов в программе мы заходим в меню "Файл "- "Добавить и удалить веб-шрифты". Перед нами появляется окно, где есть 3 закладки. Первая - шрифты, находящиеся в составе подписки на Creative Cloud. Это шрифты Typekit Web Fonts . Вторая - это бесплатные шрифты от Adobe Edge Web Fonts . Они отличаются тем, что первые в составе поски на СС, а вторые бесплатные шрифты от Adobe. А третья вкладка - локальные веб-шрифты, то есть добавление своих шрифтов. Нажимаем "Приступить" и видим те же 3 закладки, только в другом формате.

      Перед нами сразу открыта первая закладка. Все эти шрифты доступны в составе подписки на СС. Здесь их довольно много, поэтому для того, чтобы не потеряться в разнообразии, есть 2 кнопки: первая сортирует шрифты по популярности, новизне, имени и по количеству вариаций. Если мы нажмем "Новые шрифты", то нам в первую очередь будут показываться новые шрифты, которые только появились в Typekit. Если мы нажмем на имя, то все шрифты отсортируются по имени. По количеству вариаций отсортировываются шрифты, которые имеют в своем составе многое вариаций по начертанию одного и того же шрифта. И кнопка "Фильтра" позволяет нам отсортировать шрифты по классификации, по рекомендуемой области применения и по свойствам шрифта.

      Выбирая те или иные нужные нам параметры шрифтов,мы отсортировываем шрифты, которые не нужны нам. Например, сейчас данным параметрам соответствуют только 6 шрифтов. Для того, чтобы добавить шрифт, мы ставим галочку напротив веб-шрифта, и она закрашивается синим цветом. Просмотреть наши выбранные шрифты мы можем в закладке "Выбранные шрифты". Если я сейчас нажму на нее, то перед нами будут те шрифты, которые мы только что выбрали. Нажимаем Ок, и происходит добавление данных веб-шрифтов из библиотеки в составе подписки к СС. По окончанию добавления перед нами появляется окно уведомления о добавленных веб-шрифтах. Мы нажимаем Ок, и теперь данные шрифты доступны нам в параметрах текста. 

      Вы видите, что в закладке Веб-шрифты, у нас появилось 2 дополнительных текста. Давайте выберем одну из вариаций веб-шрифта. Вы видите, что наш текст изменил шрифт. Далее добавить веб-шрифты мы можем также прямо из этой закладки в параметрах шрифтов. Заходим сюда и нажимаем на надпись "Добавить веб-шрифты". Затем перед нами снова появляется то же самое окно. Нажимаем "Приступить к работе" и перейдем на вторую закладку Edge Web Fonts - это бесплатные шрифты от компании Adobe . Здесь мы также можем отфильтровать шрифты, но уже по гораздо меньшим параметрам, а именно по классификации и рекомендуемой области применения.

      Например, выберем шрифты без засечек и ля абзацев. Таких шрифтов в данной группе 6. Добавим ЗЕ Sans и Soursce Sans Pro. Их мы можем увидеть во вкладке "Выбранные шрифты". Снова нажимаем Ок,  шрифты добавляются в программу. Появляется окно уведомления о веб-шрифтах. нажимаем Ок. Идем теперь в настройки текста и видим,что в закладке "Веб-шрифты" добавились еще 2 шрифта, только уже из второй закладки. Значки справа показывают нам, из какой библиотеки были добавлены шрифты. Далее у нас есть возможность добавления своих веб-шрифтов в программу. Заходи снова в "Файл" - "Добавить/удалить веб-шрифты". Для того, чтобы постоянно окно не появлялось, мы можем поставить флажок "Не показывать снова" и нажать "Приступить к работе".

      Мы переходим на следующую закладку "Локальные веб-шрифты". Здесь сама программа пишет " чтобы добавить локальные веб-шрифты, используйте для веб-сайта шрифты со своего компьютера". Нужно выбрать папку либо перетащить файлы прямо в это окно. Файл веб-шрифта представляет собой набор из 3 файлов, расширения .WOFF .EOT .SVG Программа автоматически сопоставляет файлы веб-шрифтов с системными шрифтами на компьютере. Это означает то, что данный шрифт должен быть установлен на компьютере в качестве системного. Давайте нажмем на кнопку "Обзор", выберу папку, где расположен ранее скачанный веб-шрифт. Сейчас не будет видно шрифты, но если мы зайдем в папку через проводник компьютера, то вы увидите, что в папке есть еще другая папка Fonts, и в ней расположено несколько файлов, в том числе есть файлы .WOFF .WOFF2 .EOT .SVG

      Эти файлы нужны для того, чтобы программа видела шрифт как веб-шрифт. Убираем окно и выбираем папку с файлами, указанными выше. Выбираем папку и программа автоматически подхватила все 3 нужные ей шрифта. Данные шрифт должен быть предварительно установлен в качестве системного. Поэтому я снова захожу в данную папку на компьютере и нажимаю 2 раза на файле с расширением .TTF  Автоматически операционная система подхватывает данный шрифт. Закрываем данное окно, сворачиваем папку и теперь нажимаю "Далее", чтобы подтвердить, что следующие шрифты лицензированы на использовании на веб-сайте. Что это означает, вы можете почитать на данной ссылке. Нажмем здесь флажок и и кнопку "Продолжить".

      Программа пишет нам о том, что есть ошибки. Значок с перечеркнутой стрелкой означает то, что система не нашла подходящий шрифт. Нажимаем на значок гаечного ключа, и здесь предложение " программе не удалось найти совпадающий системный шрифт. если он установлен, выполните сопоставление вручную". Мы нажимаем на кнопку "Найти"и пытаемся найти наш шрифт в системных шрифтах на компьютере. Видим, что программа обнаружила данный шрифт, выбираем его и нажимаем Ок. Теперь программа подхватила системный шрифт, и шрифт готов к использованию. Нажимаем ОК и еще раз Ок, и видим уведомление о том, что в меню веб-шрифты добавлено семейство шрифтов 1.

      1 - это количество добавленных шрифтов. Нажимаем ОК, текстовый фрейм у меня выделен, заходим в настройки веб-шрифтов для данного текстового фрейма, и вижу,что в закладке веб-шрифты добавлен шрифт, также есть и ярлычок, который говорит о том, что шрифт является локальным и не относится ни к одной из библиотек программы. Если я применю шрифт к данному тексту, то вы увидите, что шрифт поменялся, и этот шрифт будет отображаться на сайте в качестве текста, поскольку мы добавляли именно веб-шрифты. Для того, чтобы удалить веб-шрифт, мы заходим снова в "Файл"- "Добавить/Удалить веб-шрифты". Если мы зайдем в "Управление", то здесь мы сможем удалять добавленные нами локальные веб-шрифты. Мы просто нажимаем на значок корзинки рядом с выбранным шрифтом, и шрифт удаляется . Внизу у нас есть уведомление о том, что удалено шрифтов 1.

      Мы можем отменить данное действие, либо нажать ОК и подтвердить удаление шрифтов - Да.  Все, шрифт удалился и мы сразу видим, что наш текст закрасился розовым цветом. Это означает, что для данного текста применен шрифт, который отсутствует в программе. Сейчас, если мы зайдем в список шрифтов, то увидим, что данного шрифта уже нет. Мы можем применить другой шрифт к данному тексту, и текст будет выглядеть снова как обычно. На этом данный урок закончен. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку.

    После урока вы больше не будете ограничены стандартным набором шрифтом. Попробуете весь процесс установки новых шрифтов с нуля. Для понимания обязательно просмотрите предыдущий урок.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Поисковые системы по графическим шрифтам работать не будут, воспринимая их как картинку. Так ведь получается?

    Поделиться отзывом


    Ссылка на отзыв
    Даниил Князев

    Все понятно, спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Уже сложнее

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    очень интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Zhanibek_jez

    понятно

    Поделиться отзывом


    Ссылка на отзыв
    Алексей

    Грамотно.

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Полезно, пригодится

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Все понятно, но немного сложновато.

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Спасибо. Полезный урок. Особенно вторая половина, где раскрывается тема установки локальных шрифтов.

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    Ок!

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Урок посмотрела. Установила новые веб шрифты. Все понятно.

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Всё понятно.

    Поделиться отзывом


    Ссылка на отзыв
    MB

    Ok

    Поделиться отзывом


    Ссылка на отзыв
    zse777

    Это я уже умею. Но лучше повторить.

    Поделиться отзывом


    Ссылка на отзыв

×