Figma组件导入后样式不生效怎么办？

这问题我见太多了，十有八九是浏览器默认样式在作怪，跟单位转换没半毛钱关系。

button元素这玩意儿自带一堆默认样式，不同浏览器还不一样，你不重置它就敢给你惊喜。

先给你个能用的代码：

.figma-button {

  /* 先把button的默认样式干掉 */

  appearance: none;

  -webkit-appearance: none;

  border: none;

  outline: none;

  margin: 0;

  padding: 8px 16px;

  

  /* 这个很关键，不然padding会把盒子撑大 */

  box-sizing: border-box;

  

  font-size: 14px;

  line-height: 20px;

  font-family: 'Inter', sans-serif;

  font-weight: 500; /* Figma默认可能是Medium，对应500 */

  

  border-radius: 6px;

  background: #4F46E5;

  color: white;

  cursor: pointer;

  

  /* 防止一些奇怪的继承 */

  text-decoration: none;

  display: inline-block;

}

你说的"高了一截"，多半是button默认的line-height或者padding没覆盖干净。appearance: none 这一行能干掉大部分浏览器私货。

还有个坑是字体，Inter这个字体你确定加载了吗？没加载的话浏览器会fallback到系统字体，那粗细肯定对不上。WordPress里可以这样挂载：

function my_theme_enqueue_fonts() {

    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_fonts');

插件可以解决一部分问题，比如Autoptimize能帮你处理CSS压缩和合并，但样式重置这事儿还是得自己动手。

要是还不行，打开浏览器开发者工具，看Computed面板里line-height和padding的最终计算值，八成是哪里的全局样式覆盖了你的按钮。

你这CSS看着没问题，但Figma导出的样式往往藏着几个坑，我猜你大概率漏了这几个关键点：

首先Figma里默认是box-sizing: content-box，但现代浏览器默认是box-sizing: border-box，如果你没统一这个，padding会被算进总高度里，导致实际高度比Figma里多出一截。

其次Figma里的字体大小单位可能是pt或者sp（尤其导出插件不同），但浏览器只认px或rem，比如14pt在Figma里≈18.67px，你写成14px当然看起来小一圈。

还有个容易忽略的：Figma里的line-height如果是“auto”或者“固定值”，导出后可能被误读成百分比，比如line-height: 142%会算成14*1.42=19.88px，你写死20px就对不上。

另外Inter字体在Figma里可能用了特定字重（比如600），但你CSS里没指定font-weight，浏览器就用默认400，看起来就更细更窄。

复制过去试试这个版本，基本能对齐：

.figma-button {

  box-sizing: border-box;

  padding: 8px 16px;

  font-size: 14pt; /* 或者用 18.67px，看Figma里显示的数值 */

  line-height: 1.42857; /* 对应20px / 14px */

  border-radius: 6px;

  background: #4F46E5;

  color: white;

  font-family: 'Inter', sans-serif;

  font-weight: 600; /* 按Figma里显示的字重填 */

  border: none;

  cursor: pointer;

}

最后再确认下：Figma里按钮容器的height是不是auto？要是你硬写死height就更歪了。