css - 草图中的文本垂直对齐方式与 css 中的不同
问题描述
我知道这是一个非常普遍的问题，但我还没有找到一个规范的解决方案。
我在 Sketch 中创建了一个设计，当我在 css 中使用确切的字体、字体大小和行高时，浏览器会以不同的方式呈现文本。
例子：
以下是文本在 Sketch 中的呈现方式：
看看文本如何与图标完美对齐？
现在，我在浏览器中呈现完全相同的内容。我正在使用 flexalign-items: center将文本与图标垂直对齐。但是，由于文本在它的边界框内没有垂直对齐，所以对齐是关闭的。
我知道编织设计系统通过裁剪文本节点周围的空白来处理这个问题。虽然这看起来是一个非常好的方法，但对于一个看似如此基本的问题，它也感觉有点过头了。
所以我的问题是：有没有使两者保持一致的解决方案？要么让 CSS 像草图一样渲染文本，还是让草图像 CSS 一样渲染文本？
感谢所有花时间阅读本文的人！