样式仿按钮的a标签文本垂直偏移问题排查与解决

问题描述 #

为了让a标签和button元素样式统一，我给两者添加了通用类.xButton，样式代码如下：

.xButton {
    border: none;
    padding: 0.5rem 1.5rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.2rem;
    font-size: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

但实际渲染时，a标签内的文本始终存在垂直向上偏移的情况（附图中上方为button，下方为a标签）。即使移除图标，偏移问题依然存在。

尝试过手动添加vertical-align: bottom或vertical-align: center，均无效果；有趣的是，如果在.xButton类中设置all: unset，button的文本也会出现同样的上移问题。补充：添加text-align: center规则也无法解决无图标时的偏移。

解决发现 #

意外测试发现，将.xButton的font-family从自定义字体Hind替换为Arial后，偏移问题完全消失。目前暂不清楚自定义字体导致该问题的具体原因，也未明确对应的字体问题反馈渠道。

完整参考代码 #

Astro组件代码 #

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & HTMLAttributes<"button">;
const { class: className, type = "button", ...attrs } = Astro.props as Props;
const isAnchor = "href" in Astro.props;
---

{
  !isAnchor ? (
    <button class:list={['xButton' , className]} type={type} {...attrs}>
      <slot />
    </button>
  ) : (
    <a class:list={['xButton' , className]} {...attrs}>
      <slot />
    </a>
  )
}

<style>
  .xButton {
    border: none;
    padding: 0.5rem 1.5rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.2em;
    font-size: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }

  .xButton > svg {
    height: 1.2em;
    width: auto;
  }

  .xButton.primary {
    color: var(--neutral-swatch-900);
    background-color: var(--primary-swatch-100);
  }

  .xButton.secondary {
    background-color: var(--primary-swatch-800);
    color: var(--primary-swatch-100);
  }

  :global(.dark) .xButton.primary {
    color: var(--neutral-swatch-100);
    background: var(--neutral-swatch-900);
  }

  :global(.dark) .xButton.secondary {
    background-color: var(--primary-swatch-100);
    color: var(--neutral-swatch-800);  
  }

  .xButton:hover {
    filter: brightness(1.3);
    transition: all 0.5s ease-in-out;
  }
</style>

组件调用代码 #

<nav>
  <XButton class="primary">
    Launch Lab&nbsp; <FlaskIcon/>
  </XButton>

  <XButton href="https://github.com/xylarshayu" rel="noopener" target="_blank" class="secondary">
    Go to Github&nbsp; <GithubLogo/>
  </XButton>
</nav>

（图标为SVG，通过unplugin-icons实现）

内容的提问来源于stack exchange，提问作者xylar