Как сжать шрифт Source Sans Pro, чтобы символы почти соприкасались при размере 30 пикселей?

У меня есть веб-сайт, на котором используется шрифт Adobe Source Sans Pro.

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

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

Большое спасибо.

Ответы (2)

Вы можете использовать свойство CSS: letter-spacing, которое также может иметь отрицательные значения .

p {
    /* 16 * 0.0625 = 1px */
    letter-spacing: 0.0625em;
}

Свойство letter-spacing управляет расстоянием между каждой буквой в данном элементе или блоке текста. Значения, поддерживаемые межбуквенным интервалом, включают значения относительно шрифта (em, rem), значения относительно родителя (в процентах), абсолютные значения (px) и свойство normal, которое сбрасывает значение шрифта по умолчанию.

Дополнительная информация: CSS-трюки по межбуквенному интервалу

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

Что-то вроде:

span.letters {
   display: inline-block;
   margin-left: -3px;
}

Что касается выбора шрифта, вы можете попробовать Open Sans .

Спасибо. Я попробую это. Как вы думаете, есть ли разница между Open Sans и Source Sans Pro? Я действительно не был уверен, что использовать, поэтому выбрал последнее. Но один больше другого или есть какие-то другие различия, о которых вы знаете?
Я попробовал ваше предложение, но кажется, что между буквами всегда есть минимальное расстояние, и даже установка интервала в 0,0 не изменит этого.
Вы также можете использовать отрицательные значения межбуквенного интервала!

Вы можете использовать отрицательный межбуквенный интервал для достижения этого эффекта.

См. этот пример на codepen .

Как сжать шрифт Source Sans Pro, чтобы символы почти соприкасались при размере 30 пикселей?
СпросиСетьПолитика конфиденциальности1y, 0v