Search

Romua1d.ru
Верстка

Вышел в свет Font Awesome (5.11.2)

В свет вышел долгожданный Font Awesome 5. Недавно вышла 5 версия самого популярного иконочного шрифта.

8 проблем прошлых шрифтов

В пятой версии было было решено 8 проблем. После роста популярности, в шрифтах были обнаружены определенные неудобства, над которыми в дальнейшем нужно было работать. Перейдем непосредственно к ним

  1. Glyphicons – знаменитый пакет иконок, включенный в Bootstrap 3 (но не BS4), всегда нуждался в 2-х классах для добавления, чтобы вывести определенный значок, нужно было написать такую конструкцию
    <span class="glyphicons glyphicons-up">

    чтобы заработал шрифт. Эта конструкция все еще рабочая.

  2. Шрифт-пакеты стали все больше и больше, и внезапно начали замедлять свои веб-сайты, которым нужно было подключить всего 5 значков, но всегда загружался шрифт с 2000 значками.
  3. Значки шрифтов были важным решением для «объединения» маленьких значков, потому что многие мелкие запросы резко замедляли страницу. Но это устаревает, благодаря HTTP2.
  4. В каждом шрифте всегда отсутствовали 1-2 значка, поэтому люди начинали использовать несколько библиотек, замедляя работу сайта еще больше и вызывая различные проблемы, такие как конфликты имени класса.
  5. При использовании шрифтов с программами чтения с экрана появляются проблемы, поскольку изнутри значок был всего лишь непонятным, японским или монгольским номером символа, который ридер не мог интерпретировать.
  6. При использовании шрифтов в настольных решениях (Photoshop, Illustrator и т. Д.) Было очень сложно выбрать значок, потому что у них не было лигатур (красивых и понятных имен)
  7. По мере созревания онлайн типографии появилось много новых потребностей, таких как профессионально созданные смелые стили.
  8. По мере того, как экраны становились качественнее и больше, маленькие иконки выглядели плохо на высоких разрешениях, а значки с высоким разрешением выглядели плохо в крошечных экранах.
к содержанию ↑

Изменения для автоматической генерации шрифта средствами JS

JS автоматизация (incl. Webpack, Gulp, Angular-CLI и т.д.) решит несколько проблем разработчиков:

  1. теперь будут упакованы шрифты в dev пакеты (создадуться небольшие пользовательские библиотеки иконок)
  2. во многих сценариях предпочитаются значки SVG вместо значков шрифтов
  3. … и SVG также могут быть включены в компактный SPA-JavaScript, что еще больше уменьшает потребность в дополнительных запросах на сервере и создает решения для развертывания в одном файле
к содержанию ↑

Font Awesome 5 получили 1 млн долларов

Правда: самая популярная бесплатная библиотека значков подняла один миллион долларов на кикстарте, чтобы исправить все эти перечисленные проблемы, и открывается досту к исходному коду и инструментам, которые были разработаны в этом процессе. Это здорово! Вот ссылка BTW.

Как еще они улучшили шрифт?

  1. они разработали все значки в первоклассном виде, предоставляя каждому значку правильную типографическую версию, включая: solid, regular, light etc.
  2. они добавили лигатуры ко всем значкам, чтобы экранные считыватели (ридеры) и супер-экраны могли наконец использовать их в правильно
  3. предоставили все в формате шрифта, а также SVG
  4. создали фреймворк JavaScript с открытым исходным кодом для использования svg-значков таким же образом, как вы использовали бы шрифтовые значки, что позволило бы связать его с существующими решениями
  5. дали нам все бесплатное CDN для людей, которые хотят использовать весь шрифт
  6. …и много другого.
к содержанию ↑

Команде FontAwesome от Даниеля

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

Скачать бесплатно

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Romuald Shmidtelson

Web Developer. I have expirience in FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть комментарии

  • Только его просто так не обновишь на сайте!
    Пробовал разными способами - не работает

    • Здравствуйте! Что вызвало у Вас трудности?

Недавние Посты

Как разработать лендинг с интеграцией SMM-инструментов

Лендинг — это визитная карточка вашего продукта или услуги. Но просто создать красивую страницу недостаточно…

1 год назад

Как получить первый заказ на фрилансе

Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…

3 года назад

Топ 7 css фреймворков 2021 года

Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…

5 лет назад

Что такое семантическое ядро и как его использовать для продвижения сайта?

Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…

5 лет назад

Что такое адаптивные изображения? Как правильно использовать srcset.

Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…

5 лет назад

Что такое Политика конфиденциальности для сайта и для чего она нужна?

Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…

5 лет назад