FontLens

Безплатно разширение за Chrome

Какъв е този шрифт? Щракнете с десния бутон и вижте CSS

Изберете текст на произволен уебсайт, щракнете с десния бутон и изберете „Inspect font with FontLens“. Върху страницата ще се отвори инспектор на шрифтове със семейството, размера, дебелината, междуредието и цвета, CSS за копиране и бутон за изтегляне на шрифта.

Добавяне в Chrome — безплатно

Работи и с Edge, Brave, Opera и други Chromium браузъри.

Инспекторът на FontLens: образец Ag между линиите за височина на главните и малките букви и основната линия, свойствата на шрифта и Tailwind фрагмент

Накратко

Какво прави
Показва шрифта на избрания текст: семейство, размер, дебелина, междуредие, цвят и други стилове, различни от зададените по подразбиране, с готов за копиране CSS.
Как да започнете
Изберете текст, щракнете с десния бутон и изберете „Inspect font with FontLens“. Елементът в менюто се показва само когато е избран текст.
Копиране като
CSS, SCSS, SASS или Tailwind, с размер в px, rem, pt или em.
Файл на шрифта
Download font изтегля уеб шрифта от неговия @font-face източник. Проверете лиценза преди употреба.
За кого е
За уеб дизайнери, front-end разработчици, одитори по достъпност и студенти, които учат CSS.
Цена
Безплатно. Без акаунт и платена версия.
Данни
Работи във вашия браузър. Без сървъри и анализи. Единствената заявка е изтеглянето на шрифт, което стартирате.
Работи в
Chrome и други Chromium браузъри, които се инсталират от Chrome Web Store. Не работи с Firefox или Safari.
Ограничения
Чете CSS на истински текст в уеб страници. Не разпознава текст в изображения, canvas елементи или PDF файлове, нито в страниците на Chrome.
Version
2.2.0, актуализирано 23 октомври 2026 г.

До шрифта с два клика

  1. 1

    Изберете текст

    Заглавие, абзац или надпис на бутон в произволна уеб страница.

  2. 2

    Щракнете с десния бутон

    Изберете „Inspect font with FontLens“. Инспекторът се отваря върху страницата със семейството, размера, дебелината, междуредието и цвета.

  3. 3

    Копирайте или променете

    Копирайте CSS или Tailwind, изпробвайте друг размер или цвят в прегледа на живо или изтеглете файла на шрифта.

Защо хората го отварят

Aa

Открийте името на шрифта

Харесва ви дадено заглавие? Изберете го и вижте семейството, дебелината и източника на шрифта: Google Fonts, Adobe Fonts или самия сайт.

{ }

Сравнете с макет

Сравнете стойностите на страницата с файла на дизайна и копирайте правилата като CSS, SCSS, SASS или Tailwind.

4.5:1

Проверете контраста

Вижте съотношението на контраста и обозначенията AA и AAA. Преди публикуване пробвайте по-тъмен текст или по-светъл фон.

Какво прави

  • Образец с водачи

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

  • формата на фрагменти

    CSS, SCSS, SASS и Tailwind. Копирайте целия фрагмент или един ред; последният избран формат се запомня.

  • Вашите единици

    Показвайте размера в px, rem, pt или em в полетата и фрагмента. rem следва основния размер на страницата.

  • Източник на шрифта

    Значка показва откъде идва шрифтът: Google Fonts, Adobe Fonts, собствен хост или системен шрифт на компютъра ви.

  • Проверка на контраста

    Съотношението между текста и фона с обозначения AA и AAA за обикновен и голям текст се обновява при промяна на цветовете.

  • Download font

    Изтегля файла от @font-face източника и го именува според семейството. Ако сървърът блокира изтеглянето, източникът се отваря в нов раздел.

Защо DevTools бавно открива какъв е този шрифт

Страницата задава списък от шрифтове, а браузърът използва първия наличен. За да разберете кой е той, отворете DevTools, намерете елемента, прочетете панела Computed и потърсете файла на шрифта в Network. Размерът, дебелината, междуредието и цветът са на различни места.

FontLens прочита изчисления стил на избрания текст и го показва в един панел: списъка със семействата, образец на първото семейство, стойностите, източника на шрифта и CSS. Чете CSS на страницата, затова не може да назове шрифт в изображение.

Нищо не напуска браузъра ви

  • Без акаунт и сървъри

    FontLens работи във вашия браузър. Без анализи и проследяване.

  • Чете избрания текст

    Инспекторът чете стиловете на текста, върху който сте щракнали с десния бутон. Данни за страницата не се изпращат никъде.

  • Четири разрешения

    Контекстно меню за десния бутон, активен раздел и достъп до страницата за отваряне на инспектора, плюс хранилище за примерния текст, единицата и формата на фрагмента.

Chrome DevTools и FontLens

Chrome DevTools и FontLensChrome DevToolsFontLens
Намерете шрифта на текстПроверете, намерете елемента и отворете ComputedИзберете текст, десен бутон, един елемент от менюто
Копирайте като Tailwind или SCSSНе, копирайте стойностите една по еднаРаздел CSS, SCSS, SASS или Tailwind
Открийте източника на шрифтаПотърсете файла в панела NetworkЗначка: Google Fonts, Adobe Fonts, собствен хост или системен
Изтеглете файла на шрифтаНамерете го в Network или Sources и го запазетеЕдин бутон
Проверка на контрастаВ избора на цвят в панела StylesОбозначения AA и AAA до прегледа на живо
ЦенаВграденоБезплатно

Въпроси

Как да разбера какъв шрифт използва даден уебсайт?

Добавете FontLens в Chrome, изберете текст в сайта, щракнете с десния бутон и изберете „Inspect font with FontLens“. Ще видите семейството, размера, дебелината, междуредието, цвета и източника на шрифта.

Как да копирам CSS на шрифт от уебсайт?

В инспектора изберете раздела CSS, SCSS, SASS или Tailwind и натиснете „Copy all“ или копирайте един ред. Ако е нужно, първо сменете единицата на px, rem, pt или em.

Мога ли да изтегля шрифт от уебсайт?

Когато текстът използва уеб шрифт, „Download font“ изтегля файла от @font-face източника. Системният шрифт няма файл за изтегляне. Проверете лиценза преди употреба в проекта си.

Може ли FontLens да разпознае шрифт в изображение или PDF?

Не. Чете CSS на истински текст в уеб страници и не може да назове шрифтове в изображения, canvas елементи или PDF файлове.

Как да проверя контраста на текста според WCAG?

Прегледът показва съотношението между цвета на текста и фона с обозначения AA и AAA за обикновен и голям текст. Променете цвят и обозначенията се обновяват.

Може ли да показва размери в rem вместо px?

Да. Сменете единицата на px, rem, pt или em и полетата и фрагментът ще я следват. rem се изчислява спрямо основния размер на шрифта на страницата, а изборът ви се запомня.

Безплатно ли е? Събира ли данни?

Безплатно е и не изисква акаунт. Няма сървъри или анализи; единствената заявка е изтеглянето на шрифт, което стартирате.

Работи ли с Edge, Brave или Opera?

Повечето Chromium браузъри инсталират разширения от Chrome Web Store, включително Edge, Brave, Opera и Vivaldi. Firefox и Safari не се поддържат.

Още безплатни разширения от PYROCTAL

Какъв е този шрифт? Само два клика.

Добавяне в Chrome — безплатно