Набор русских шрифтов – верстайте и радуйтесь

20 октября 2015 Антон Кулешов 747 0

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

Реклама

Данный сайт является пополняемым каталогом шрифтом, но, что очень важно – русский. На время написание статьи на нём уже скопилась коллекция из 306 различных шрифтов.

Перейдя по данной ссылке – fonts4web, вы сразу обнаружите удобный поиск и сортировку по категориям.

udobnyj-poisk-i-sortirovka-fonts4web

А ниже - имеющиеся в каталоге шрифты:

shrifty-fonts4web

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

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

Первый способ:

pervyj-sposob-fonts4web

Результат:

rezultat-fonts4web

Второй способ:

vtoroj-sposob-fonts4web

Тут есть ещё несколько простых настроек: вид шрифта, размер и стиль его. Сервис сгенерирует и код для добавления в файл CSS, сэкономив, тем самым, драгоценные секунды вашего времени. Все сделано просто, но удобно и нет лишнего, надеюсь, данный сервис станет для вас хорошим инструментом в работе.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Кнопка «Добавить в избранное» на JavaScript

25 декабря 2014 Антон Кулешов

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

Глитч текста

14 июня 2016 Антон Кулешов

Как-то я уже писал статью по глитчу – как оказалось, тема очень востребована, поэтому я написал, ко всему, и свой собственный онлайн глитч генератор на JavaScript, который вы можете наблюдать во вкладке сервисов. В будущем, скорее всего я его переделаю и улучшу, а сегодня я решил добавить ещё один способ реализации глитч эффекта. Данный вариант я давно хотел отобразить у себя на сайте, так как в нем используются только HTML и CSS3.

Всплывающая подсказка с HTML кодом

25 июня 2015 Антон Кулешов

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, jQuery или MooTools, либо готовые плагины, а кто-то просто воспользуется стандартными средствами HTML и CSS. Главное: сделать вплывающую подсказку интересной и привлекательной для пользователя.