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

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

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

Реклама

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

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

udobnyj-poisk-i-sortirovka-fonts4web

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

shrifty-fonts4web

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

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

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

pervyj-sposob-fonts4web

Результат:

rezultat-fonts4web

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

vtoroj-sposob-fonts4web

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

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

О том, как скачать видео с Ютуба и Вк

27 января 2016 Антон Кулешов

Оставим ненадолго серьёзные темы аутентификаций через социальные сети и сегодня я расскажу об очень приятном сервисе, который позволяет скачивать аудио и видео контент там, где это невозможно стандартными методами. Кнопка скачать попросту отсутствует на Ютубе, ВКонтакте, Фейсбук и куче других популярных сервисов. Конечно, продвинутый пользователь может скачать видео или аудио стандартными средствами браузера, но это сложно.

SMTP сервер для отправки писем с сайта если функция mail не работает

9 апреля 2016 Антон Кулешов

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

21 эффект для ссылки

3 августа 2015 Антон Кулешов

Как оформить ссылку на сайте? Этот вопрос наверно один из самых простых, возникающих у веб-разработчика, тем более что до недавнего времени и вопроса, как такового и не было – редко кто менял даже стандартный набор цветов. Появление CSS3 внесло значительные изменения в «серые будни» и страницы «расцвели». Мы уже рассматривали ранее множество различных ховер эффектов, сегодняшняя же CSS библиотечка – заточена под ссылки, хотя, приведенные в ней эффекты легко можно применить и для других элементов страницы. Библиотека содержит следующие эффекты: ссылки при наведении вращаются, меняют перспективу, перестраивают бордеры, фиксируют взгляд, создают эффект куба, вызывают всплывающую подсказку, заключаются в скобки и много других причудливых выделений.