List All Fonts сканира всяка уебстраница и представя пълен инвентар на всяко семейство шрифтове в употреба — уеб шрифтове, заредени от CDN, самохоствани шрифтове и системни шрифтове. Всеки шрифт показва предварителен преглед на текст в реално време, заредените тегла и стилове, броя на елементите, които го използват, и копиране с един клик на CSS декларацията font-family.
Идентифицирането на шрифтове на уебсайт, на който се възхищавате, изискваше инспектиране на елементите един по един в DevTools, проверка на изчисленото свойство font-family или използване на браузърни разширения, които откриват само един шрифт в даден момент. List All Fonts ви дава пълната картина в един изглед — всеки зареден и използван шрифт на страницата, с мостри от текст в реално време, показващи точно как се изобразява всеки шрифт. Инструментът разграничава уеб шрифтовете (заредени чрез @font-face or Google Fonts) и системните шрифтове (Arial, Helvetica, Georgia и др.), показвайки пълния стек font-family. За всеки шрифт виждате кои тегла са заредени (400, 600, 700), кои елементи го използват и какви размери на шрифта са приложени. Кликнете върху който и да е шрифт, за да копирате неговата CSS декларация — готова за поставяне във вашия собствен проект. Предварителният преглед в реално време използва действителното изобразяване на шрифта от страницата, а не общ предварителен преглед, така че виждате точно как изглежда шрифтът при размерите и теглата, използвани в сайта.
Изброява всяко семейство шрифтове (font-family), действително рендирано на страницата, включително уеб шрифтове от Google Fonts, Adobe Fonts или персонализирани декларации @font-face, както и резервни системни шрифтове. Показва общия брой на намерените уникални семейства шрифтове.
Всеки шрифт се показва с примерен текст („The quick brown fox jumps over the lazy dog“), рендиран с помощта на действителния файл на шрифта, зареден на страницата. Виждате реално изобразяване — не общ предварителен преглед.
За всеки шрифт вижте кои тегла са заредени (Regular 400, Medium 500, SemiBold 600, Bold 700) и дали са налични курсивни (italic) варианти. Помага ви да разберете заредения подмножество на шрифта.
Вижте колко елемента на страницата използват всеки шрифт. Най-използваният шрифт е изброен първи. Разберете кои шрифтове са основни (основен текст) и кои са вторични (използвани само в няколко елемента).
Кликнете върху всеки запис на шрифт, за да копирате неговата пълна CSS декларация font-family (напр. font-family: 'Inter', sans-serif) в клипборда си. Готово за директно поставяне във вашата таблица със стилове.
Всеки шрифт показва своя източник: Google Fonts (със специфичния URL адрес), Adobe Fonts, самохостван (с URL адреса на @font-face) или системен шрифт. Знайте точно откъде идва всеки шрифт.
Посетете уебсайт с красива типография и незабавно вижте всеки шрифт, който използва — имена, тегла и откъде идват. Край на гадаенето „кой е този шрифт?“ или използването на ненадеждни инструменти за идентифициране на шрифтове.
Колко шрифта зарежда вашата страница? Има ли неизползвани шрифтове, които се изтеглят, но не се прилагат? List All Fonts показва действителната употреба — ако зареден шрифт има 0 елемента, които го използват, това е излишен трафик.
Документирайте типографията на вашия проект, като стартирате List All Fonts на всяка страница. Проверете дали правилните шрифтове и тегла се използват последователно в целия сайт — уловете отклоняващи се декларации font-family.
Идентифицирахте шрифт, който харесвате, но той е платен? Копирайте името на шрифта и потърсете безплатни алтернативи със сходни характеристики. Предварителният преглед в реално време ви помага да запомните точно как е изглеждал.
Стартирате List All Fonts на една и съща страница в различни браузъри, за да проверите дали едни и същи шрифтове се изобразяват навсякъде. Стековете от системни шрифтове се разрешават по различен начин в различните операционни системи — уловете несъответствията.
Отворете плаващия док DevSuite Pro и щракнете върху иконата List All Fonts. Инструментът сканира изчислените стилове на страницата и правилата @font-face.
Панел показва всички шрифтове, намерени на страницата, сортирани по честота на употреба. Всеки запис показва името на шрифта, предварителен преглед на текста, теглата и броя на елементите.
Превъртете през предварителните прегледи в реално време, за да видите как се изобразява всеки шрифт. Сравнете шрифта на заглавията на страницата спрямо основния шрифт и акцентния шрифт.
Кликнете върху всеки запис на шрифт, за да копирате неговата CSS декларация font-family. Кликнете върху връзката към източника, за да посетите произхода на шрифта (страница в Google Fonts, CDN URL и др.).
Поставете декларацията font-family във вашия CSS и заредете шрифта от същия източник, за да го използвате във вашия собствен проект.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
