Установить фиксированный размер шрифтов - PullRequest
Новая
       39

Установить фиксированный размер шрифтов

2 голосов
/ 06 июля 2019

У меня есть программа, которая, в зависимости от вывода одной функции, получает код состояния одной функции и возвращает значок удивительного шрифта на карте в угловом формате. Тем не менее, у шрифта потрясающие значки имеют разные размеры, поэтому я не могу использовать функцию transform: scale() css, но все значки должны быть 45x45px.

Я уже пробовал использовать transform, но обнаружил, что значки не имеют одинаковые размеры. Я также пытался использовать font-size, который фиксировал только высоту (очевидно).

Вот элемент со значком 

 <div class="msgbox_icon">
      <span class="text-gray-500 fa-4x far {{icon}}"></span>
 </div>

мой размер шрифта по умолчанию $font-size-base: 0.875rem; //14px

а вот мой 

.msgbox_icon {
    padding-right:60px;
    padding-left:20px;
    display: flex;
    align-items: center;
}

поэтому я попытался добавить font-size: 3.2142857em!important; а затем с помощью transform: scale(1.15, 0.987) потому что по какой-то причине высота будет не 45, а 45,6

Ранее я также пытался использовать ширину и высоту, но потом обнаружил, что потрясающие шрифты иконки ведут себя как текстовые символы.

Ответы [ 2 ]

1 голос
/ 06 июля 2019

Альтернативный ответ:

Поскольку шрифты Awesome предоставляются в виде элементов SVG, их можно масштабировать и увеличивать их размер. Пожалуйста, прочтите этот Q & A

Этот Q & A также чрезвычайно полезен.Ваш Font-Awesome SVG должен иметь атрибут ViewBox.

В настоящее время только псевдокод:

HTML: 

<div class="msgbox_icon">
    <span><svg width="45" height="45" viewBox='0 0 50 50'><path d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg></span>
</div>

CSS: 

.msgbox_icon > span {
    height: 45px;
    display: flex;
    position:relative
} 
.msgbox_icon > span > svg {
    position:absolute; 
}

Прочтите здесь о том, как экспортировать Font Awesome как SVG.

В настоящий момент я не могу проверить вышеописанное на font-awesome, но, пожалуйста, обратитесь к ответам, приведенным выше,

0 голосов
/ 06 июля 2019

Это на самом деле очень интересная проблема, и я нашел очень интересное чтение , которое дает слюноотделение подсказок к ответу ....

Контролируются ли метрики шрифта с помощью CSS?

...

Краткий ответ: нет.

НО .....

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

Проблема:
Чтобы заставить / любой шрифт глифа иметь высоту 45px.

Решение:

(Для исследования приведенных ниже значений вам потребуется использовать программу для чтения шрифтов, такую ​​как , найденную здесь, см. Также здесь . Я не могу легко найти эти значения в Интернете, но, видимо, вам следует изучить Font-awesome SVG)

HTML: 

<div class="msgbox_icon">
    <span><i class="fas fa-some-icon"></i></span>
</div>

CSS: 

.msgbox_icon {
    /* Font metrics */
    /* YOU WILL NEED TO RESEARCH THESE VALUES!! */
    --fm-capitalHeight: 0.68;
    --fm-descender: 0.54;
    --fm-ascender: 1.1;
    --fm-linegap: 0;

    /* Desired font-size for capital height */
    --capital-height: 45;

    /* Apply font-family */
    font-family: 'font-awesome';

    /* Compute font-size to get capital height equal desired font-size */
    --computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
    font-size: calc(var(--computedFontSize) * 1px);

    /* Then....to centre the glyph */
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));

    /* Then... to centre the line height */
    --distanceBottom: (var(--fm-descender));
    --distanceTop: (var(--fm-ascender) - var(--fm-capitalHeight));

    /* Then.... vertical align */
    --valign: ((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));

    /* desired line-height */
    --line-height: 2;
    line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
}
span {
    vertical-align: calc(var(--valign) * -1px);
}

Поэтому любой значок шрифта, загруженный в элемент .msgbox_icon > span, будет иметь высоту 45 пикселей.

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

...