как узнать какой размер шрифта на сайте

Как узнать шрифт на сайте

Бывает, что в сайте нравится всё: верстка, структура, используемые шрифты. Если с версткой и структурой разобраться можно достаточно быстро, то вопрос, как узнать шрифт на сайте, сначала может заставить серьезно задуматься. Придуманы миллионы наборов, определить один конкретный без специальных инструментов не получится.

Исходный код страницы

Самый простой способ – исследовать код страницы. Глубокие познания в HTML и CSS для выполнения этой задачи не понадобятся, нужно лишь найти свойства «font-family». Рассмотрим на примере Google Chrome:

Откройте страницу, на которой используется понравившийся шрифт. Щелкните правой кнопкой по тексту. Выберите пункт «Просмотреть код».

Справа появится консоль с инструментами разработчика. Найдите в ней пункт «font family».

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

Кстати, в других браузерах операция выполняется аналогично. Например, в Mozilla Firefox нужно щелкнуть по тексту правой кнопкой и выбрать пункт «Исследовать элемент».

Искомые данные отобразятся в окне справа, свойство называется также «font family».

Сервисы и расширения

Если вы не хотите пользоваться инструментами разработчиков и выискивать название в коде страницы, воспользуйтесь сервисами или расширениями для определения шрифта.

Зайдите на сайт fount.artequalswork.com. Там есть большая кнопка «Fount», которую нужно схватить и перетащить на панель закладок.

Важно! Чтобы отобразить панель закладок в Chrome, нажмите сочетание Ctrl+Shift+B.

Откройте страницу с понравившимся шрифтом. Нажмите на Fount на панели закладок. Курсор превратится в крестик. Наведите его на шрифт и щелкните левой кнопкой. Результат появится в правом верхнем углу.

В Mozilla Firefox, Opera и других браузерах Fount тоже работает без проблем. Если этот сервис вам не нравится, или вы не хотите пользоваться панелью закладок, то используйте одно из расширений для определения шрифта.

— Fontface Ninja для Safari и Chrome.

— Type Sample для Chrome.

— WhatFont для Chrome, Firefox, Яндекс.Браузера.

Работают все перечисленные расширения по одному алгоритму: нужно нажать на иконку дополнения, а затем навести курсор на шрифт. Информация появится во всплывающем окне.

Источник

Как узнать, какой шрифт на сайте?

Как узнать и определить, какой шрифт на сайте?

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

[message type=”info”]Уверена, что многие веб-мастера меня поймут. Те, кто владеет уже таким секретам, может почитать на сайте другие интересные материалы, а те, кто уже не раз задавался вопросом, как же узнать, какой шрифт на сайте, который вам понравился, читайте внимательно до конца.[/message]

Итак, вы занимаетесь активным серфингом, и изучаете и анализируете сайты конкурентов и коллег по цеху. И вас давно уже гложет мысль, что пора что-то кардинально изменить на своем сайте или в своем блоге. Вполне возможно, что переделку вы хотите начать именно с изменения шрифта. Да еще только что увидели такой шрифт, который как нельзя лучше вам бы подошел. Но как узнать и определить название шрифта?

Наконец, я нашла сервис, который настолько легко и быстро помогает определить шрифт, что невольно задаешься вопросом: как же все это время я о нем ничего не знала?

Знакомьтесь со своим будущим помощником – [urlspan]сервис “Fount”![/urlspan]

Чтобы вы могли использовать его в любой момент времени, нажимайте на “Fount” левой кнопкой мыши, и перетаскивайте на панель браузера. Видите на моей панели браузера белую иконку с надписью “Fount”? Точно так же он будет выглядеть и у вас, если ваш браузер – Google Chrome. В других браузерах, таких, как Safari, Google Chrome, Mozilla Firefox, Internet Explorer, начиная с 8-й версии и выше, этот сервис работает по такому же принципу. А вот владельцам браузеров Opera, Internet Explorer 7 и некоторых других, придется поискать какой-либо другой вариант.

Пошаговые действия

Итак, перетаскиваем мышкой кнопку на панель браузера, и инструмент полностью готов к работе. Теперь, находясь на каком-либо другом сайте, мы хотим узнать, какой шрифт использует владелец сайта.

Нажимаем в браузере на иконку Fount, под мышкой появляется крестик, и нажимаем мышкой на участок текста, шрифт которого хотим определить. Посмотрите, в правом верхнем углу, появилась табличка с названием шрифта “PT Serif”. Вот таким легким способом, мы можем определить, какой шрифт на сайте нашего коллеги. А также, можно увидеть размер 17 пикселей, степень насыщенности и стиль.

Тренируемся здесь же!

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

Источник

Как определить название шрифта на сайте за 1 секунду

В одной из ранних статей мы рассказали об Интернет-ресурсах, способных превратить процесс распознавания шрифтов если не в нечто занимательное, то по крайней мере в рядовую, но перспективную процедуру.

И хотя лучшее — враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?

Fontface Ninja

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

На примере отдельных веб-продуктов мы видим это в минимализме, граничащем со строгостью, в смещении акцентов с результата на процесс и, безусловно, в симпатии к внешней атрибутике. А особую привлекательность для разработчиков, по-видимому, представляет собой воинственный и загадочный символизм самураев и их негласных антагонистов — ниндзя.

Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.

Type Sample

Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.

Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.

Посредством авторизации чере аккаунт Twitter’a с помощью Type Sample можно создать собственную коллекцию шрифтов и поглядеть на чужие.

WhatFont

Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.

Стоит отметить: WhatFont позволяет определить не только название, но при нажатии на текст также межстрочный интервал, начертание, размер, семейство, которому принадлежит шрифт, а также его текущий цветовой код.
Кроме того, можно посмотреть, как шрифт выглядит на примере английского алфавита в целом и скачать — если к его разработке приложила руку сама Google.

Typ.io

Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.

Источник

Определить шрифт по картинке онлайн

Бывает, видишь шрифт, но не знаешь его название.
Если это текст на сайте, то название шрифта всегда можно определить из кода сайта. Если же картинка, то гарантии нет, но есть вероятность — она зависит качества картинки, качества сервиса и распространенности шрифта.

WhatTheFont

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

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

Остальные сервисы воспринимают только картинки большого размера с крупным шрифтом.

Итак, попробуем воспользоваться сервисом.

WhatFontIs

Этот сервис имеет самую большую поисковую базу, для поиска английского шрифта мне он понравился больше всех. Жаль, что он не поддерживает кириллицу.

Fonts Squirrel

В этом сервисе поиск идет по 4-м сайтам, но шрифтов все равно меньше, чем в предыдущем сервисе (WhatFontIs). Наш шрифт остался не распознанным.

Кроме того, разделить буквы мышкой тут нельзя, и на нашей картинке отдельным символом распознается только буква V, остальные буквы слиты по две:

Невозможно разделить буквы

FontSpring

FontSpring — всего лишь урезанная версия Fonts Squirrel — распознаватель у них общий, но Fonts Squirrel ищет помимо шрифтов с FontSpring, шрифты с еще 3-х сайтов. Так что никакого смысла пользоваться FontSpring нет, однозначно не рекомендую.

Fonts Ninja

Fonts Ninja — это расширение для браузера Google Chrome. Оно предназначено для идентификации шрифта текста с сайта — именно текста, а не картинки.

После установки расширения в правом верхнем углу браузера появится зеленая кнопка. Щелкаете эту кнопку, и тогда при наведении курсора на текст веб-страницы сайта будет всплывать окно с названием и размером шрифта. Выглядит так:

Расширение Ninja

Расширение пригодно для определения шрифта текста на любом языке.

IdentiFont

На этом сервисе можно попытаться распознать английский шрифт, ответив на ряд вопросов:

Где распознать русский шрифт с картинки

Большинство онлайн-сервисов распознавания с картинки определяет только английский шрифт. Распознать русский шрифт можно несколькими способами.

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

Нужно выбрать буквы, которые одинаковы в русском и английском (например a, o, p, c, m, y, p, в, м, н, х) — распознать их как английский шрифт в том же сервисе WhatFontIs.
А затем по названию английского шрифта найти аналогичный русский шрифт.

Попробовать поискать на WhatTheFont

Там хоть и мало шрифтов, но все же есть немного кириллицы.

Спросить людей на сайте

Можно задать вопрос на сайте fontmassive.com/discuss — тут довольно живая дискуссия, обновления почти каждый час. Просто прикрепляете картинку и ждете ответа.

Сайты-коллекции русских шрифтов

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

Несколько таких сайтов есть в таблице выше в третьей снизу строке.

Источник

Как я могу узнать, какие шрифты использует сайт?

Как я могу узнать, какой шрифт или шрифты использует веб-сайт? Существуют ли какие-либо инструменты или расширения для браузера, которые могут облегчить работу?

Вариант 1: использовать расширение для браузера (Easy)

Такие расширения, как WhatFont (доступны для Chrome, Firefox и Safari), позволяют довольно легко обнаруживать семейства шрифтов любого текста на веб-странице. Вам просто нужно установить расширение, активировать его на сайте и нажать на элемент, который вы хотите проверить. Результаты отображаются во всплывающем окне, всегда в выбранном вами контексте.

Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)

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

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

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

Источник