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