Разгледайте подбрана директория с популярни Google Fonts с визуализации в реално време, филтрирайте по категория и търсете по име, после копирайте готов за поставяне CSS и разгледайте предложени съчетания на шрифтове — всичко в браузъра ви.

Размер 34px

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


За Съчетаване на шрифтове и директория на Google Fonts

Тази директория с шрифтове събира 80 популярни Google Fonts на една търсима страница, всеки изобразен като жив образец с пример-панграма, ред с азбука и цифри и значка за категория. Тя покрива пет семейства шрифтове — sans-serif, serif, display, ръкописни и monospace, — така че можете да сравнявате реални форми на буквите, вместо да гадаете по имена.

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

Когато шрифт или двойка пасне, едно кликване копира готов за поставяне CSS — ред @import за стиловия файл на Google Fonts плюс съответния стек font-family с разумен резервен вариант. Шрифтовете се зареждат от Google Fonts само за живите прегледи; нищо, което въвеждате, не се качва никъде.

Как да използвате Съчетаване на шрифтове и директория на Google Fonts

  1. Разгледайте картите на шрифтовете, всяка показваща името си, значка за категория и жив пример текст, изписан в действителния шрифт.
  2. Използвайте полето за търсене, за да намерите шрифт по име, или кликнете чип за категория (Sans-serif, Serif, Display, Handwriting, Monospace), за да филтрирате решетката.
  3. Плъзнете плъзгача за размер (16–72 px), за да прегледате примерния ред при целевия ви размер за заглавие или основен текст.
  4. Кликнете чип "Pairs with" (Съчетава се с) или бутона "Preview pairing" (Преглед на съчетанието), за да видите заглавие и абзац от основен текст, зададени в предложената комбинация.
  5. Кликнете бутона "CSS" на карта или в прегледа на съчетанието, за да копирате реда @import и декларациите font-family в клипборда си.

Често задавани въпроси

Тя предлага подбран набор от 80 широко използвани Google Fonts, разпределени в пет категории: sans-serif, serif, display, ръкописни и monospace. Всеки чип за категория показва брой на живо, така че можете да видите колко шрифта отговарят на текущия ви филтър.

Всеки шрифт изброява един или два ръчно подбрани партньорски шрифта, които контрастират добре с него — обикновено display или serif шрифт за заглавия, съчетан с четлив основен шрифт. Прегледът на съчетанието показва точните роли на заглавие и основен текст за всяка комбинация.

За единичен шрифт получавате ред @import url() за крайната точка css2 на Google Fonts (обикновена и получерна дебелина) плюс стек font-family с правилния общ резервен вариант. За двойка получавате и двата импорта и отделни декларации за заглавия и основен текст.

Да, живите прегледи зареждат шрифтовете от CDN мрежата на Google Fonts — това е единствената външна заявка на страницата. Вашите търсения, избори на филтри и копиран CSS остават във вашия браузър; нищо не се качва или съхранява.

Да, разглеждането, прегледът на съчетания и копирането на CSS са безплатни без нужда от акаунт. Изброените шрифтове са Google Fonts, които сами по себе си са безплатни за използване в лични и търговски проекти под техните отворени лицензи.

Можете да настроите размера на образеца навсякъде от 16 px до 72 px с плъзгача за размер, който обновява всички карти наведнъж. Това улеснява сравняването на кандидатите при точния размер, който планирате да използвате за заглавия или основен текст.

Сподели
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.