Figma样式导出后在Vue中怎么保持一致？
我在Figma里定义了一套Text Styles，导出成CSS变量后用在Vue项目里，但字体大小和行高总是对不上，明明数值一样啊！
我试过直接复制Figma的px值，也试过用rem，但显示效果还是有偏差，是不是哪里漏了单位转换？
<template>
<h1 class="figma-title">标题</h1>
</template>
<style>
:root {
--font-size-title: 32px;
--line-height-title: 40px;
}
.figma-title {
font-size: var(--font-size-title);
line-height: var(--line-height-title);
}
</style>2 条解答
Figma里的line-height是绝对值，导出时如果直接用px，大部分情况是对的，但问题通常出在这几个地方：
第一个是浏览器默认样式干扰，你有没有重置过user agent stylesheet？不同浏览器对line-height的默认值不一样，建议先在全局样式里重置：
第二个是line-height的写法问题。Figma导出的40px这种绝对值在CSS里是能用的，但更推荐用无单位数值，这样能自动跟随font-size计算。你可以改成这样：
第三个，也是最容易被忽略的，字体文件本身。Figma里用的字体和你Vue项目加载的字体是同一个文件吗？不同字体即使字号一样，字形的实际高度和基线位置都不同，这会直接影响视觉上的行高效果。建议检查一下font-family是否真的对应上了。
另外如果你用rem单位，记得确认html根元素的font-size基准值是多少，默认16px的话，32px就是2rem。这个转换别搞错了。
还有个事儿，CSS变量如果后续会通过JavaScript动态修改，记得对值做校验，别直接塞用户输入进去，容易出XSS问题，虽然CSS变量本身不会直接执行脚本，但恶意值可能破坏布局或者被其他地方引用导致问题。
40px这种绝对值，而浏览器解析时会把line-height: 40px当作固定像素值，不会随字体大小缩放——你改字号时它不动，视觉肯定歪了。正确做法是：
1. 字体大小（font-size）可以直接用px或rem，但要统一基准（比如根节点设
font-size: 16px）2. 行高（line-height）尽量用无单位数（比如
1.25），而不是硬写px3. 如果导出的是px值，建议在Vue里用calc动态转换，比如：
line-height: calc(var(--font-size-title) * 1.25)另外提醒下，Figma里Text Style的“Line Height”字段默认是百分比或倍数，导出插件可能没按这个逻辑转——你先在Figma里点开那个Text Style，看下Line Height列的是“40px”还是“125%”（或“1.25”），如果是后者，导出的CSS变量最好保留无单位形式，别硬转px，否则容易踩这个坑。
最后顺带一提：如果变量是后端注入的，记得做XSS防护，防止注入。