Увеличение размера текста символа Юникод занимает слишком много поля

0

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

Изображение 174551

Вот символ, который имеет размер 180pt, и я выделил его, чтобы вы могли видеть объем пространства вокруг него!

Редактировать:

Я пробовал с нормальным персонажем "а", но он занимал одинаковые поля/отступы!

  • 0
    По умолчанию большинство символов в шрифте имеют небольшой отступ в своем дизайне. Некоторые символы могут иметь больше, чем «ожидаемый» отступ - хорошим примером является цифра «1», которая обычно дополняется до такой же ширины, как и все остальные цифры. С каким символом у вас возникли проблемы?
  • 0
    @Jongware отредактировано
Показать ещё 4 комментария
Теги:

2 ответа

2
Лучший ответ

Этот вид интервала встроен в сам шрифт-глиф и не может быть действительно преодолен с помощью CSS, кроме свойств высоты строки.

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

Поделиться
0

Пустое пространство не является ни маркой, ни дополнением, а частью дизайна глифа, дизайнером шрифтов. Символы обычно создаются так, что последовательные глифы не касаются друг друга и так, что даже когда текст задается сплошным (в терминах CSS, когда line-height равна 1), глифы обычно не касаются глифов на других линиях.

Это означает, что если вы хотите, чтобы глиф появлялся в минимальном прямоугольнике, который заключен, это, кажется, является целью здесь, вам нужно бороться с типографским дизайном. Нет простого способа сделать это. Для конкретного символа и конкретного шрифта, предполагая, что шрифт всегда будет использоваться (как правило, это нереалистичное предположение в Интернете), вы можете узнать (с экспериментом) подходящие значения, необходимые для смещения символа. Пример:

<style>
.tight {
  font-size: 180pt;
  font-family: Lucida Sans Unicode;
  background: #aaf;
  display: inline-block;
  position: relative;
  width: 0.537em;
  height: 0.63em;

}
.tight span {
  position: absolute;
  left: -0.059em;
  top: -0.385em;
}
</style>           
<span class=tight><span>&#x2135;</span></span>

Результат (когда доступна Lucida Sans Unicode):

Изображение 174551

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню