Как сделать красивый шрифт в css
Перейти к содержимому

Как сделать красивый шрифт в css

  • автор:

Красивые шрифты от Google Web Fonts

Google Web Fonts — каталог бесплатных шрифтов от Google. Данный сервис позволяет использовать любые понравившиеся вам шрифты на своем сайте. Выбранные шрифты подгружаются на ваш сайт с CDN-хостинга. Не рекомендуется загружать большое количество шрифтов, так как это сказывается на скорости загрузки страниц сайта. После выбора шрифтов вы увидите индикатор загрузки страницы в правом верхнем углу.

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

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

1. «Playfair Display SC» + Arimo

Playfair-Display-SC+Arimo

красота природы

Август 22, 2015

Красота природы таится во всем, что нас окружает – и в солнечном дне и ласковом море, которое плещется у нас под ногами.

@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic|Playfair+Display+SC:400,700&subset=latin,cyrillic); h2 < font-family: 'Playfair Display SC', serif; font-weight: 500; letter-spacing: 1px; font-size: 24px; color: #222222; text-align: center; >.post-detail, .post < font-family: 'Arimo', sans-serif; >.post-detail < width: 30%; margin: 0 auto 10px; text-align: center; >.post-info < color: #be9656; font-style: italic; position: relative; display: block; font-size: 13px; >.post-info:before < content: ""; border-bottom: 1px solid #be9656; width: 100%; position: absolute; left: 0; top: 50%; z-index: 0; >.post-info span < display: inline-block; padding: 0 1.2em; background: #ffffff; position: relative; z-index: 2; >p

2. Lora

font-lora

 
Вдохновение недели

Неожиданный дизайн обычных вещей

Автор Админ / 2 Комментария
@import url(https://fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic); *, :after, :before < box-sizing: border-box; >body < margin: 0; >a < color: inherit; text-decoration: none; >.post-header < position: relative; background: #BCE3EA; padding: 25px; text-align: center; z-index: 2; >.post-cat a < display: inline-block; font-size: 10px; margin: 5px 25px; color: white; letter-spacing: 0.1em; text-transform: uppercase; background: #937338; line-height: 20px; height: 20px; position: relative; >.post-cat a:before, .post-cat a:after < content: ""; display: block; position: absolute; width: 0; height: 0; border: 10px solid #937338; top: 0; >.post-cat a:before < left: 0; transform: translateX(-100%); border-left-color: transparent; >.post-cat a:after < right: 0; transform: translateX(100%); border-right-color: transparent; >.post-title < text-transform: uppercase; >.post-title h2 < font-family: 'Lora', serif; font-weight: normal; line-height: 1.8em; font-size: 20px; color: white; margin: 13px 0 8px; letter-spacing: 0.08em; >.post-meta < font-size: 10px; text-transform: uppercase; color: #937338; letter-spacing: 0.2em; >.border < position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; overflow: hidden; z-index: -1; >.border:before < content: ""; display: block; position: absolute; width: 100%; height: 100%; border: 1px solid #937338; >.border span:before, .border span:after < content: ""; display: block; position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #937338; background: #BCE3EA; >.border span:nth-child(1):before < top: -18px; left: -18px; >.border span:nth-child(1):after < top: -18px; right: -18px; >.border span:nth-child(2):before < bottom: -18px; left: -18px; >.border span:nth-child(2):after

3. «Playfair Display» + «Open Sans»

Playfair-Display+Open-Sans

 

День в Париже

Сентябрь 1, 2015 admin

Париж великолепен. Шумный и изысканный, чопорный и демократичный Париж .

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,700,400italic,700italic&subset=latin,cyrillic); * < box-sizing: border-box; >body < margin: 0; >.post < width: 60%; margin: 30px auto 0; >img < width: 100%; max-width: 100%; height: auto; >.post-container < width: 100%; padding: 30px; >h2 < margin: 15px 0; font-family: 'Playfair Display', serif; font-size: 26px; text-align: center; letter-spacing: 2px; color: #c2a77a; >h3 < font-size: 13px; margin: 0; color: #b5b5b5; font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: 1.4px; text-align: center; >h3 a < color: #c2a77a; >p < font-family: 'Open Sans', sans-serif; color: #2f2f2f; font-size: 14px; line-height: 24px; text-align: center; margin-top: 0; >.post-info

4. Comfortaa + «Didact Gothic»

Comfortaa+Didact-Gothic

 
Мода

Новая коллекция Zara

Опубликовано 10 апреля, 2015

Джинсовые кюлоты, удлиненные жилеты, полушубки из искусственного меха и многое другое в новой рекламной кампании Zara TRF осень-зима 2015-2016.

ПРОДОЛЖИТЬ ЧТЕНИЕ
@import url(https://fonts.googleapis.com/css?family=Didact+Gothic|Comfortaa:400,700&subset=latin,cyrillic); *, *:before, *:after < box-sizing: border-box >.wrap < position: relative; margin: 50px auto; text-align: center; width: 320px; height: 370px; background: white; padding: 30px 40px; border: 1px solid rgba(0, 0, 0, .1); >.wrap:before, .wrap:after < content: ""; position: absolute; width: inherit; height: inherit; border: 1px solid rgba(0, 0, 0, .1); background: white; >.wrap:before < top: 5px; left: -5px; z-index: -1; >.wrap:after < top: 10px; left: -10px; z-index: -2; >.cat span < font-family: 'Comfortaa', cursive; font-size: 13px; text-transform: uppercase; margin-bottom: 20px; color: #ff6f5a; font-weight: bold; >h2 < font-family: 'Comfortaa', cursive; font-size: 18px; font-weight: 400; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; color: #333333; >.public < font-family: 'Didact Gothic', sans-serif; color: #999999; font-size: 13px; >p < font-family: 'Didact Gothic', sans-serif; color: #555555; font-size: 14px; line-height: 22px; >.more-button < font-family: 'Comfortaa', cursive; color: #333333; font-size: 11px; padding-bottom: 8px; display: inline-block; margin: 35px 0 20px; text-transform: uppercase; position: relative; font-weight: bold; letter-spacing: 1px; transition: .3s linear; >.more-button:before < content: ""; position: absolute; left: 50%; margin-left: -20px; bottom: 0; height: 1px; width: 40px; background: #333333; transition: .3s linear; >.more-button:hover < color: #ff6f5a; >.more-button:hover:before

5. «Tenor Sans» + «Pt Serif»

Tenor-Sans+Pt-Serif

 

10 лучших мест для путешествия

Путешествия, Приключения - Автор - Сентябрь 15, 2015
Вы готовы к путешествиям?

Это очень интересно – думать о возможностях. Может быть, отдохнуть от беготни на тропическом пляже.

@import url(https://fonts.googleapis.com/css?family=Tenor+Sans|PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic); body < margin: 0; >.post < width: 660px; margin: 0 auto; text-align: center; >.post-header < margin-bottom: 35px; >h1 < font-family: 'Tenor Sans', sans-serif; font-size: 26px; color: #111; letter-spacing: 2px; line-height: 1.4em; text-transform: uppercase; margin-bottom: 0; >.dots span < display: inline-block; width: 6px; height: 6px; background: #DDDDDD; border-radius: 50%; box-shadow: 12px 0 0 0 #DDDDDD, 24px 0 0 0 #DDDDDD, -12px 0 0 0 #DDDDDD, -24px 0 0 0 #DDDDDD; >.info < margin-top: 14px; >span < font-size: 14px; font-style: italic; color: #999; font-family: 'PT Serif', serif; >figure < position: relative; margin: 0 0 30px; >figure:before < content: ""; position: absolute; display: inline-block; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 20px solid white; left: calc(50% - 14px); left: -webkit-calc(50% - 14px); top: 0; >img < display: block; max-width: 100%; height: auto; >figcaption < font-family: 'Tenor Sans', sans-serif; font-size: 11px; text-transform: uppercase; color: white; letter-spacing: 1px; position: absolute; bottom: 0; left: 0; right: 0; line-height: 1.6; background: rgba(0, 0, 0, .6); padding: 15px; >p

6. «Roboto Slab» + «PT Sans Caption»

roboto-pt-sans

 

Ягодный пирог

Ягодный пирог - рецепт аппетитного летнего блюда для всей семьи. Порадуйте свою семью ароматной выпечкой!

Рецепт
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|PT+Sans+Caption&subset=latin,cyrillic); *, *:before, *:after < transition: .3s linear; >.wrap < width: 280px; height: 380px; padding: 20px; background: url(https://html5book.ru/wp-content/uploads/2016/05/cake.jpg); background-size: cover; text-align: center; position: relative; color: white; line-height: 1.5; margin: 50px auto 0; >.wrap:after < content: ""; display: block; position: absolute; left: 0; top: 0; background: rgba(53, 60, 68, 0.4); height: 100%; width: 100%; z-index: 1; >.inner < position: relative; z-index: 2; height: 100%; >h2 < font-family: 'Roboto Slab', serif; font-weight: normal; >.line < display: block; margin: 20px auto; position: relative; width: 54px; height: 1px; background: white; >.line:before < content: ""; position: absolute; width: 38px; margin: 0 auto; top: -3px; left: 0; right: 0; height: 1px; background: white; >.line:after < content: ""; position: absolute; width: 22px; margin: 0 auto; top: 3px; left: 0; right: 0; height: 1px; background: white; >p, a < font-family: 'PT Sans Caption', sans-serif; font-size: .8em; >a < text-decoration: none; display: block; position: absolute; bottom: 20px; left: 50%; margin-left: -55px; width: 110px; padding: 8px 12px; text-transform: uppercase; border: 1px solid; color: white; box-sizing: border-box; >a:before < content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 10px; border-top: 1px solid; border-left: 1px solid; >a:after < content: ""; position: absolute; bottom: 2px; right: 2px; width: 10px; height: 20px; border-bottom: 1px solid; border-right: 1px solid; >a:hover:before < width: 10px; height: 20px; >a:hover:after

#6 – Стили для текста

#6 – Стили для текста

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

Видеоурок

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

Чтобы выбрать красивый шрифт вы можете обратиться к специальному сервису от Google — Google Fonts . Более детально об этом сервисе, а также о способе работы с ним рассказано в видео ниже:

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

Останется лишь выбрать размер шрифта. Сделать это просто, но придется немного поиграться с размерами, чтобы подобрать подходящий для вашего сайта. Зачастую на сайтах указывают размер шрифта 14 или 16 пикселей, что является стандартным размером шрифта.

Подбираем лучшие шрифты для сайта

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов . Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit , были созданы в качестве альтернативы с целью предоставить что-то новое.

Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts .

Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент HTML-документа . Все готово, чтобы ссылаться на него в CSS ! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.

Шрифты для сайта — что может быть не так?

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите , — один из стандартных вариантов. Например, Times New Roman .

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows , Mac , Google , а также Unix и Linux .

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

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

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

Самые популярные шрифты для веб-страниц

Arial

Arial

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов « sans serif » или рубленых шрифтов ( у которых нет засечек на кончиках букв ). Его часто используют в Windows для замены других литер.

Helvetica

Helvetica

Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда ( по крайней мере, в качестве подстраховки для других шрифтов ).

Times New Roman

Times New Roman

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

Times

Times

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

Courier New

Courier New

Похож на Times New Roman и применяется в качестве разновидности старой классики. Он также считается моноширинным шрифтом. В отличие от шрифтов с засечками и без, все его знаки имеют одинаковую ширину.

Courier

Courier

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

Verdana

Verdana

Verdana может по праву считаться истинным веб-шрифтом ( true web font ) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Georgia

Georgia

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana . Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman , по сравнению с ним выглядит словно карлик.

Palatino

Palatino

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

Garamond

Garamond

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

Bookman

Bookman

Bookman ( или Bookman Old Style ) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.

Comic Sans MS

Comic Sans MS

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

Trebuchet MS

Trebuchet MS

Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP . Сегодня с его помощью составляют основной текст.

Arial Black

Arial Black

Аналог стандартного шрифта для сайта Arial . Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica . А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.

Impact

Impact

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

Заключение

Стандартные шрифты для сайта — это запасной вариант на случай провала плана А. Десятилетиями они широко используются на большинстве устройств.

А если нет? Helvetica не подкачает!

Генератор стилей CSS шрифтов

Стилизуйте свой шрифт и получите его HTML-код CSS онлайн

Powered by aspose.com and aspose.cloud
Семейство шрифтов
Размер шрифта
Буква отст
Слово отст

Normal Bold
None Underline Overline Line through
Normal Italic Oblique
Normal Small caps

Трансформировать

none none UPPERCASE UPPERCASE lowercase lowercase Capitalize Capitalize

Скопировать в буфер обмена
Текст для просмотра
Скопировать в буфер обмена

Попробуйте другие приложения

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

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

Если вам понравился генератор шрифтов CSS, попробуйте также другие инструменты HTML , которые помогут вам упростить разработку.

  • Текстовое оформление CSS онлайн.
  • Предварительный просмотр стилизованного текста.
  • Получите HTML-код текста, чтобы добавить его в свой проект.
  • Простое и быстрое приложение, упрощающее процесс кодирования стиля шрифта.

Как применить текстовое оформление HTML CSS

  • Напишите текст, который хотите стилизовать (кодировать).
  • Просмотрите стилизованный текст в окне WYSIWYG.
  • Выберите параметры стиля шрифта, такие как размер, цвет, жирность, вариант и т. Д.
  • Получите код HTML и CSS в соответствующих окнах.
  • Просмотрите стилизованный текст в окне WYSIWYG.
  • Как создать HTML-код CSS для шрифта? Просто напишите текст, который вы хотите закодировать, в ячейке Текст для просмотра. Установите необходимые параметры и получите фрагмент кода в ячейке HTML или CSS для копирования и вставки.
  • Что такое генератор HTML-кода? HTML Text Generator — это WYSIWYG-решение для получения фрагментов кода для вашего стилизованного текста или шрифта, которые вы можете встроить в свой проект.
  • Какими свойствами шрифта я могу управлять с помощью этого кодировщика? Этот генератор кода шрифта позволяет вам устанавливать такие параметры, как семейство шрифтов, размер шрифта, буква sp, слово sp, цвет текста, вес, украшение, стиль, вариант и т. д.
  • Могу ли я кодировать шрифты в Linux, Mac OS или Android? Да, вы можете использовать наш бесплатный генератор кода HTML CSS в любой операционной системе с веб-браузером. Он работает онлайн и не требует установки какого-либо программного обеспечения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *