Инструмент онлайн-просмотра iconfont и его анализ

Инструменты Интернет-ссылки

Введение в функцию

Инструмент онлайн-просмотра iconfont, его не нужно устанавливать, просто откройте и используйте.
Все значки, определенные в локальном файле ttf, можно просмотреть.
Предварительный просмотр также поддерживаетсяАли шрифтТри режима в юникоде, классе шрифта, символе. В соответствии со ссылкой на онлайн-шрифт вы можете проанализировать и просмотреть все значки, определенные им.

фон спроса

Этот инструмент используется для решения следующих проблем

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

Используйте учебник

Использовать локальные файлы

Нажмите кнопку
Выберите файл с суффиксом ttf
Парсинг выполнен успешно
Нажмите на определенный значок, чтобы скопировать код значка

Разбирать онлайн-файлы (для библиотеки иконок Али)

Скопировать ссылку на интернет-ресурс
Для режима юникода скопируйте ссылку на онлайн-файл ttf
Для режима класса шрифта скопируйте ссылку на онлайн-файл css.
Для режима символов скопируйте ссылку на онлайн-файл js.
Нажмите, чтобы проанализировать
Если синтаксический анализ прошел успешно, щелкните конкретный значок, чтобы скопировать код значка.

Знание иконок

Раньше я знал только, как использовать iconfont, но у меня не было глубокого понимания соответствующих знаний.Я узнал немного об этом недавно и делюсь этим с вами здесь.

Али значок три режима

Режим Unicode
Сам по себе он ничем не отличается от ссылки на внешний пользовательский шрифт. Просто один отображается как графика, а другой как текст. Для системы разницы нет.
Ссылка на iconfont и ссылка на пользовательский шрифт используют один и тот же код

Определить семейство шрифтов

@font-face {
    font-family: 'iconfont';  /* 自定义字体族名，可以是任意名， */
    src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot'); /* 字体描述文件链接 */
    src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot?#iefix') format('embedded-opentype'), /* 兼容 IE9 */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff2') format('woff2'), /* 兼容 IE6-IE8 */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff') format('woff'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.ttf') format('truetype'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.svg#iconfont') format('svg'); /* 兼容 iOS 4.1及以上 */
}

Используйте семейство шрифтов (текст или значок)

.iconfont {
    font-family: "iconfont" !important; /*使用自定义字体或者icon*/
    /* 上面一句，和我们平时定义「微软雅黑」（font-family: "Microsoft YaHei", sans-serif;）字体是同样的语法 */
    /* 只是「微软雅黑」在大部分电脑都会自带有，浏览器能直接找到系统的「微软雅黑」字体描述文件，不需要我们自己定义字体族，不需要使用外部的字体描述文件 */
}

«&#» означает, что «&#» начинается с объектов HTML. Весь контент, отображаемый в html, может быть выражен в виде &#. Например, объект HTML китайских иероглифов состоит из трех частей:&#(中文对应ASCII码);. Например, преобразуйте «последний» в «最新»
Почему китайский и английский языки могут отображаться напрямую без использования формы «&#»? Потому что китайский и английский имеют ASCII для автоматического выхода. И iconfont не определен в ASCII. обычай.
iconfont эквивалентен использованию оставшейся кодировки Unicode, выражая описание настраиваемого значка в виде объектов HTML, начинающихся с &#.
«&#», за которым следует десятичное число, «&#\x», за которым следует шестнадцатеричное число.
Font class
- Этот режим работает по тому же принципу, что и режим Unicode, который сохраняется кодировкой Unicode. Просто используйте его по-другому.
- unicode предназначен для прямой записи содержимого в innerHTML для экранирования, в то время как класс шрифта должен определяться содержимым через псевдокласс :before css.
- В классе шрифта «&#\x» заменяется escape-символом «\», потому что «&#\x» — это символ объекта html, который может быть проанализирован только html и не может быть проанализирован в css.
- Через ссылку css, предоставленную Ali iconfont, вы можете просмотреть файл прямо в браузере, чтобы увидеть его определение.
Symbol
- Этот режим принципиально отличается от двух предыдущих.Режим Symbol использует технологию svg для отрисовки значков и не использует кодировку Unicode.
- То есть разные иконки изображаются разными тегами svg.
- Поскольку используется технология svg, она относится к графике, а не только к символам. Таким образом, этот режим поддерживает цветные значки.
- Через ссылку js, предоставленную Ali iconfont, вы можете просмотреть файл прямо в браузере, чтобы увидеть его определение.

Значение различных файловых суффиксов

EOT (Embedded Open Type) — это формат шрифта, созданный Microsoft. Используйте в браузерах серии IE.
SVG (Scalable Vector Graphics (Font)) — это формат шрифта, улучшенный за счет векторной графики. Обратите внимание, что svg и svg символа здесь — это два понятия. Первый — это описание шрифта типа svg, а суффикс — прямое описание svg-графики. Этот режим поддерживается только в iOS Mobile.
OTF (шрифт OpenType) и TTF (шрифт TrueType) — это форматы файлов шрифтов, запущенные совместно Apple и Microsoft.С ростом популярности Windows они стали наиболее часто используемым представлением файлов шрифтов. В настоящее время все основные браузеры поддерживают этот режим.
WOFF (Web Open Font Format), шрифты WOFF обычно загружаются быстрее, чем другие шрифты, используя структуру хранения и алгоритм сжатия в шрифтах OTF и TTF. В настоящее время все основные браузеры поддерживают этот режим.
О его конкретной совместимости мы можем узнать из замечаний, открыв ссылку на класс шрифта iconfont.

Объяснение кода инструмента

Инструменты За исключением vue и opentype.js, этот инструмент работает только с одним html-файлом. Заинтересованные студенты могуткликните сюдаПроверьте исходный код.
Принцип инструмента очень прост и может быть достигнут с помощью следующих шагов
- Получите файл определения шрифта. Для локального разбора получите локальный файл через поле ввода. Для онлайн-файлов файл определения шрифта получается через ajax.
- Для онлайн-файлов css и js сопоставьте все имена значков с помощью регулярных выражений и сохраните их через массив. Для файлов ttf используйтеopentype.jsразобрать.
- Динамически создавать dom, загружать файлы ресурсов, просматривать и отображать все собранные значки.
Почему локальные файлы поддерживают только ttf?
- Поскольку этот тип файлов более совместим, его можно использовать во всех основных браузерах.
- Обои пытались использовать файл svg, но обнаружили, что он не может быть проанализирован в хроме, а позже узнал, что этот формат в настоящее время используется только на мобильном терминале ios.
Почему вам нужно использовать opentype.js для разбора файлов ttf
- Поскольку файл ttf закодирован с обратным порядком байтов, избежать кодировки обычным способом невозможно. Обычное совпадение невозможно.
- Поэтому для разбора иконок используется внешняя библиотека opentype.js.

Готово, приходи, когда будет времямой блогСадись!