Outlook字体大小不一致问题解决：<v:roundrect>标签适配方案

问题背景 #

用户初始代码如下：

<html>
<head>
<style>
  p {
    font-size: 16px;
  }
  .font-size-16 {
    font-size: 16px !important;
  }
</style>
</head>
<body>
  <p>Duis eros mauris, sodales et ullamcorper ac, ultrices vitae mi. Morbi scelerisque tristique nibh, eget venenatis erat mattis maximus. Donec vestibulum auctor consectetur.</p>
  <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/contact/support/" style="font-family: Verdana, Geneva, sans-serif; height: 54px !important; width: 125px !important; padding-top: 10px; text-decoration: none; background-color: #2747d7!important; color: #fff !important; v-text-anchor:middle;" arcsize="20%" strokecolor="white" fillcolor="#2747d7">
        <w:anchorlock/>
        <center class="font-size-16" style="color:#ffffff; font-size:16px">Contact us</center>
    </v:roundrect>
  <![endif]-->
</body>
</html>

这段代码里，段落字体始终能稳定显示16px，但<v:roundrect>内部<center>标签的字体在不同Outlook版本中显示大小不一致，通常比设置值小2px。用户尝试过移除行内!important并在<head>添加样式的方案，问题仍未解决。

解决方案 #

基于Nathan的思路，调整后的代码可实现Outlook中整体字体大小一致，同时解决VML按钮的样式适配问题：

<style>
    body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16px;
    }
</style>
<!--[if mso]>
<style>
    .font-size-override-button {
        font-size: 12pt !important;
        text-decoration: none;
    }
</style>
<![endif]-->

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com/contact/support/" style="height:39px;v-text-anchor:middle;width:125px;" arcsize="30%" stroke="f" fillcolor="#2747d7">
    <w:anchorlock/>
    <center>
    <![endif]-->
        <a href="https://www.example.com/contact/support/" class="font-size-override-button" style="background-image: linear-gradient(90deg, #2747D7 0%, #6127E7 51%, #2747D7 100%) !important; background-position-x: 0 !important; background-position-y: 0 !important; background-repeat: no-repeat !important; background-size: 200% auto !important; background-color: #2747d7 !important; border-radius:8px;color:#ffffff;display:inline-block;font-family:Verdana,Geneva,sans-serif;font-weight:bold;line-height:39px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;">Contact us</a>
    <!--[if mso]>
    </center>
</v:roundrect>
<![endif]-->

关键改动说明 #

• 全局基准字体统一：给<body>设置全局字体大小16px，确保整体文本的显示基准一致。
• Outlook专属单位适配：在MSO条件样式中，使用pt单位（12pt≈16px）强制设置按钮字体大小，规避Outlook对px单位的解析偏差。
• 分离VML与标准按钮代码：通过条件注释拆分VML按钮和标准<a>标签按钮，既兼容Outlook的VML渲染逻辑，也保证其他邮箱客户端显示标准按钮样式。
• 简化VML冗余样式：移除VML中不必要的行内样式，只保留核心布局属性，避免样式冲突。

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