替代答案：

Question

我有一个程序，该程序根据一个函数的输出，获取一个函数的状态代码，并以角度显示卡片中的字体真棒图标。但是字体真棒图标每个都有不同的尺寸，因此我不能使用CSS的transform: scale()函数，但是我所有的图标必须为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

我之前也尝试过使用宽度和高度，但是后来发现超棒字体的图标就像文本字符一样。

Answer 1

替代答案：

因为字体真棒字体作为SVG元素提供，所以您可以缩放它们并更轻松地强制其大小。 Please read this Q&A

This Q&A也非常有帮助。您的真棒字体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; 
}

Read here关于如何将Font Awesome像SVG一样。

目前，我无法以超棒的字体测试以上内容，但请参考上面的链接答案，

Answer 2

这实际上是一个非常有趣的问题，我发现了一些interesting reading，它为答案提供了令人垂涎的提示。...

CSS是否可以控制字体规格？

...

简短答案：否。

但是.....

如果您能够查看字体字形并发现它们的度量值，则CSS可以提供解决方案。

问题：
强制a /任何字体字形的高度为45px。

解决方案：

（要研究下面引用的值，您将需要使用字体读取程序，例如found here，另请参见here。我无法轻松地在线找到这些值，但是显然，您应该探索Font-awesome SVG's

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元素中的任何超棒字体图标都将被强制高度为45px。

这未经测试。但please read the full documentation。然后执行required font-awesome research。

为字体真棒图标设置固定尺寸

2 个答案:

替代答案：

CSS是否可以控制字体规格？

但是.....