Получите Iconfont сразу

Icon CSS шрифт

Получите Iconfont сразу

原文链接：https://github.com/bsdfzzzy/iconfont-all-in-one

Что такое IconFont

Как следует из названия, IconFont — это значок шрифта. Строго говоря, это шрифт, однако они содержат не буквы и не цифры, а скорее символы и глифы. Вы можете стилизовать его с помощью CSS, как обычный текст, что делает IconFont популярным выбором для значков при разработке для Интернета.

Фон для IconFont

WebFont

Все мы знаем, что при производстве веб-страниц часто используются разные шрифты, такие как Microsoft Yahei, Arial, Aria и так далее. Когда мы пишем стиль css, мы можем указать имя шрифта элемента через font-family,Мы называем этот тип шрифта WebFont.. Но традиционные веб-разработчики имеют ограниченный выбор шрифтов. Есть всего несколько шрифтов, которые гарантированно работают на всех публичных системах — это так называемые веб-безопасные шрифты. Мы могли бы использовать стек шрифтов, чтобы указать выбираемые шрифты, за которыми следуют веб-безопасные альтернативы, а затем системный шрифт по умолчанию, но это увеличивает нагрузку на тестирование, чтобы убедиться, что наши проекты работают с каждым шрифтом. **Веб-шрифты — это функция CSS, которая позволяет указать файлы шрифтов, которые загружаются вместе с вашим веб-сайтом при посещении. **Во-первых, в начале CSS есть блок @font-face, который указывает файл шрифта для загрузки:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

Затем мы можем использовать шрифт, который мы определили.

  html {
 	  font-family: "myFont";
	}

Images

Качественный веб-сайт не может перечислить все виды значков.Традиционным способом добавления значков являются изображения, но использование изображений имеет много недостатков, в основном в следующих трех аспектах:

  • Добавлен запрос страницы
  • Размер и цвет изображения не так просто изменить
  • Чтобы увеличить четкость, изображение становится все больше и больше

CSS Sprites

Чтобы уменьшить количество запросов изображений и повысить производительность, мы можем использовать изображения спрайтов:Объедините несколько небольших изображений на веб-странице в один файл изображения, затем используйте свойство CSS background-image, чтобы вставить изображение, а затем используйте свойство background-position, чтобы точно расположить требуемую часть изображения..但是它有个问题就是，雪碧图比较适合固定功能的网站。如果我们的网站每隔一段时间就要加一些新功能，添加和替换雪碧图就变成了很繁琐的工作。

IconFont

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

Плюсы и минусы IconFont

преимущество

  • Вы можете легко применить к ним любой эффект CSS.
  • Поскольку это векторная графика, их можно масштабировать. Это означает, что мы можем масштабировать их без потери качества.
  • Нам нужно отправить только один или несколько HTTP-запросов, чтобы загрузить их, в отличие от изображений, для которых может потребоваться несколько HTTP-запросов.
  • Загружаются быстро из-за небольшого размера.
  • Они поддерживаются во всех браузерах (даже до IE6).

недостаточный

  • Нельзя использовать для отображения сложных изображений
  • Обычно ограничивается одним цветом, если не применяются некоторые приемы CSS.
  • Иконки шрифтов обычно разрабатываются по определенной сетке, например 16x16, 32x32, 48x48 и т. д. Если по какой-либо причине вы измените систему сетки на 25x25, вы можете не получить четких результатов.

Принцип IconFont

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

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}

font-family: имя загруженного шрифта.

src:[url] Загрузите шрифт, это может быть относительный путь, абсолютный путь или сетевой адрес. Формат шрифта, определяемый параметром [format], который используется для облегчения распознавания браузерами. Основные значения: [truetype(.ttf), opentype(.otf), truetype-aat, embedded-opentype(.eot), svg(.svg), woff(.woff)].

font-weight: определение полужирного стиля.

font-style: определение стиля шрифта.

формат соответствует формату шрифта и общему написанию совместимости:

@font-face {
 font-family: 'defineName';
 src: url('../fonts/custom-font.eot');
 src: url('../fonts/custom-font.eot?#iefix') format('embedded-opentype'),
      url('../fonts/custom-font.woff') format('woff'),
      url('../fonts/custom-font.ttf') format('truetype'),
      url('../fonts/custom-font.svg#defineName') format('svg');
 font-weight: normal;
 font-style: normal;
}

Что делает IEFIX?

Версия до IE9 не анализирует объявление шрифта в соответствии со стандартом. Когда атрибут src содержит несколько URL-адресов, он не может правильно анализировать и возвращает ошибку 404, в то время как другие браузеры автоматически принимают свои собственные применимые URL-адреса. Поэтому сначала поместите формат EOT, поддерживаемый только до IE9, а затем добавьте ? после URL-адреса, чтобы содержимое после вопросительного знака использовалось в качестве параметра URL-адреса в версии до IE9. Что касается роли #iefix, то одна — выступать в качестве комментария, а другая — превращать параметр url в якорь для уменьшения количества символов, отправляемых на сервер.

Почему существует два src?

В большинстве случаев первый src можно удалить, если только вам не требуется поддержка режима совместимости в IE9. В IE9 для рендеринга страниц можно использовать режим IE7 и IE8.Майкрософт модифицировал синтаксический анализатор CSS в режиме совместимости, что привело к сбою использования ?. Поскольку интерпретатор CSS выполняет синтаксический анализ снизу вверх, добавление атрибута src выше без вопросительного знака решает проблему.

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

.example {
  font-family: 'defineName';
  content: '/e103';
}

В этом примере элемент, выбранный примером, будет отображаться как/e103соответствующий значок.

Быстро используйте существующий IconFont

IconFont уже является относительно зрелой технологией, и наиболее часто используемой в Китае являетсяАлимама МУКС, тем чаще используются за рубежомFont-Awesomeа такжеМатериальный дизайн (требуется переворачивание).

Что касается непосредственного использования IconFont, существует множество руководств, вот несколько руководств, которые автор считает хорошими.

Али iconfont:

Шрифт-Удивительный:

Иконки материалов:

Создайте свой собственный IconFont

Выше описано, как использовать IconFont. Когда мы разрабатываем большой веб-сайт, вполне вероятно, что мы хотим, чтобы стиль был ближе к пользователю (или относительно нетрадиционным).Как мы можем разработать собственный IconFont?

Сгенерировано с помощью программного обеспечения

Лично я не силен в создании ПО, вот два хороших туториала

Создано с помощью веб-сайта

Вот два примера веб-сайтов:Али IconШрифт,icomoon

Ali IconFont выше [Использовать существующий IconFont](#Быстро использовать существующий IconFont) Ответ в Zhihu уже содержит подробные шаги, поэтому я не буду здесь вдаваться в подробности.

Скриншот Icomoon выглядит следующим образом.

Не стесняйтесь выбирать несколько значков, например, первые четыре

Выберите «Создать шрифт» в правом нижнем углу.

Нажмите «Загрузить», будет загружен сжатый пакет, после распаковки он выглядит следующим образом.

Вы можете видеть, что есть файлы шрифтов в четырех форматах (eot/svg/ttf/woff), и производство успешно.Далее выполните описанные выше шаги, чтобы использовать его (вы также можете обратиться к примеру, сгенерированному icomoon для вас)

Генерировать со скриптом

Для фронтенд-разработчиков найти плагин, поддерживающий генерацию IconFont, — самая большая радость, к счастью, мы нашлиgulp-iconfontЭтот плагин в сочетании сgulp-iconfont-cssМожет реализовать автоматическое создание файлов шрифтов значков.

В дополнение к плагину gulp есть еще один инструментwebfontloader

Их документация очень полная, и настройку скрипта можно выполнить, следуя руководству Мы практиковали приведенные выше решения в нескольких проектах и ​​пытались много раз.

Файлы шрифтов, такие как .ttf, .eot, .woff и т. д.

Из-за типов шрифтов, используемых на веб-страницах, разные браузеры имеют разные спецификации поддержки типов шрифтов. Существует несколько основных категорий типов форматов шрифтов: TrueType, Embedded Open Type, OpenType, WOFF, SVG.

TrueType

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

EOT — встроенный открытый тип (.eot)

Шрифты EOT встроены, разработаны Microsoft. Разрешает встроенные шрифты OpenType с @font-face на веб-страницу и загружать браузер для рендеринга, сохраненного во временной папке установки.

OpenType(.otf)

OpenType — это шрифт, разработанный Microsoft и Adobe, и браузер Microsoft IE использует этот шрифт. Готов заменить шрифты TrueType.

WOFF — формат шрифта WebOpen (.woff)

WOFF (формат шрифта веб-разработки) — это стандарт формата шрифта, специально разработанный для Интернета. На самом деле это инкапсуляция форматов шрифтов, таких как TrueType/OpenType. Каждый файл шрифта содержит шрифты и метаданные, специфичные для шрифта (метаданные). Файлы шрифтов сжаты. для удобной передачи по сети.

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG — это открытый стандартный графический формат, разработанный W3C. Шрифты SVG используют технологию SVG для отображения шрифтов, и существует сжатый gzip SVG-шрифт SVGZ.

Reference

Категории