Как да намерите шрифта на уеб страница, като използвате инструмента за проверка на елементите и разширенията на браузъра

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

Може би попадате на привлекателен сайт, докато сърфирате в мрежата, и искате да знаете какви шрифтове използва. С онлайн разширенията и вградения в браузъра ви инструмент Inspect Element, идентифицирането на шрифт е бързо и лесно.

В случай, че не сте знаели, вграденият инструмент на вашия браузър Inspect Element ви позволява да разгледате изходния код на уебсайта. Можете да разберете елементите на дизайна на даден сайт, като разгледате неговите CSS, HTML и друга информация. Това е чудесен начин да натрупате вдъхновение, когато проектирате свой собствен сайт.

Процесът на идентифициране на шрифт с помощта на инструмента Inspect Element е доста прост и няма да имате нужда от умения за кодиране. Този инструмент е достъпен във всички браузъри на пазара и всеки има подобно оформление.

Ето как да идентифицирате шрифт с помощта на инструмента за проверка на браузъра.

1. Отворете уебсайта, който искате да използвате.
2. Маркирайте текста, който има шрифт, който искате да идентифицирате, и щракнете с десния бутон върху него.
3. Кликнете върху Огледайте от контекстното меню.
4. Когато се отвори менюто Проверка, щракнете върху Изчислено.
5. Превъртете надолу, за да намерите Шрифтово семейство раздел. Тук можете да намерите името и стила на шрифта, както и неговите размери.

Ако искате по-бърз начин да намерите шрифта на даден сайт с помощта на инструмента за проверка, опитайте вместо това:

1. Отворете уебсайта, който искате да използвате.
2. Натиснете Ctrl + Shift + C (Cmd + Shift + C на Mac).
3. Задръжте курсора на мишката върху текста, за да покажете стила на шрифта, размера, цветовия код и полето.

Можете също да проверите списъка на шрифтовете, използвани на уеб страница, като използвате инструмента за проверка. Ето как да направите това:

1. Отидете на уеб страницата.
2. Отворете изходния код, като натиснете Ctrl + Shift + I (Cmd + Shift + I на Mac).
3. Щракнете върху Мрежа и след това изберете Шрифт раздел.
4. Тук ще видите списък с всички шрифтове, използвани на уеб страницата.

За да получите списъка с всички шрифтове в реално време, може да се наложи да опресните уеб страницата.

Свързани: Как да увеличим или намалим размера на шрифта във Firefox

Как да идентифицирам шрифтове с помощта на разширения на браузъра

Ако искате по-удобен начин за идентифициране на шрифт, може да искате да инсталирате разширение на браузъра за намиране на шрифтове. Въпреки че има няколко разширения на браузъра, които могат да помогнат за откриване на шрифтове в мрежата, двете най-популярни са WhatFont и Търсене на шрифтове.

Нека да разгледаме процеса на идентифициране на шрифтовете с помощта на двете разширения.

1. WhatFont

WhatFont е широко популярен за бързо откриване на множество шрифтове наведнъж. Ето как да използвате този инструмент.

1. Когато WhatFont е активиран във вашия браузър, задръжте курсора на мишката върху текста, за да покажете неговия шрифт.
2. След като щракнете върху текста, ще се появи изскачащ прозорец с останалите подробности за шрифта, като например размера на шрифта, цвета и стила.
3. Освен това можете да изберете едновременно множество раздели на текст, за да сравните различни шрифтове на една и съща страница.

Изтегли: WhatFont за Chrome | Firefox | Сафари (Безплатно)

2. Търсене на шрифтове

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

Въпреки това, Font Finder е по-подходящ за уеб разработчици, които искат да заменят съществуващите шрифтове с нови в реално време. Това улеснява тестването на шрифтовете, преди да правите някакви постоянни промени.

Ето как да тествате шрифт с помощта на Font Finder:

1. Маркирайте част от текста от уеб страницата.
2. Щракнете с десния бутон върху него и изберете Търсене на шрифтове от контекстното меню.
3. Изберете Заменете шрифта с и въведете името на шрифта. Нека добавим Калибри и вижте как променя шрифта във визуализацията.
4. Ако искате да нулирате шрифта, опреснете страницата.

Изтегли: FontFinder за Chrome | Ръб, край | Firefox (Безплатно)

Какво ще кажете за проверка на шрифта в изображение?

Ако искате да идентифицирате шрифтовете в изображение, разширенията на браузъра и инструмента за проверка на браузъра ви може да не помогнат. Можете обаче да опитате инструменти за онлайн проверка на изображения като WhatFontIs, FontSquirrel, Fontspring, WhatTheFont, и много други.

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

1. Ако все още не сте, изтеглете изображението, което искате да използвате.
2. Импортирайте изображението в WhatTheFont.
3. WhatTheFont автоматично ще разпознае текста във вашето изображение. Свийте или увеличете полето за изрязване, така че да заобикаля шрифта, който искате да идентифицирате. Удари бутон със стрелка когато приключи.
4. След това WhatTheFont ще съчетае шрифта в изображението със шрифтове в своята галерия и ще ви покаже тясно свързани шрифтове.
5. Ако не намерите веднага съвпадение, можете да продължите да щракате Покажи повече резултати за да видите повече свързани шрифтове.

Свързани: Най-добрите уебсайтове за безплатни шрифтове за безплатни шрифтове онлайн

Открийте шрифтовете от мрежата и ги използвайте във вашите дизайни

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

WhatTheFont и 4 алтернативи за намиране на шрифтове от изображения

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

Прочетете Напред

За автора