SVG弯曲文本在移动端浏览器放大溢出问题排查与解决

问题描述 #

使用基础SVG元素实现弯曲文本，采用网页安全字体与相对单位样式，但在Android端Chrome 120浏览器中，文本出现放大并溢出的情况；桌面端Chrome 120显示正常。尝试过更换字体、切换MS Edge浏览器、在根元素设置1rem/16px字体大小等方法，均未解决问题。

效果对比 #

桌面端	移动端

测试代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <defs>
      <style>
        @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap');
      </style>
      <path id="yz" d="M61.92190299775521,240 A178.0780970022448,178.0780970022448 0 0 1 418.0780970022448,240"></path>
    </defs>
    <rect width="100%" height="100%" fill="white" />
    <text style="font-family: 'PT Serif', serif; font-size: 6.9ex; white-space: pre; letter-spacing: -0.05ex;">
      <textPath href="#yz"> LOREM  IPSUM  DOLOR</textPath>
    </text>
  </svg>

问题原因 #

1. ex单位跨端解析差异：ex是基于字体x-height（小写字母x的高度）的相对单位，移动端Chrome对PT Serif字体的x-height计算逻辑与桌面端不同，导致6.9ex在移动端被解析为更大的实际字号，超出了预设路径的容纳范围。
2. 移动端浏览器文本优化策略：Chrome移动端针对小屏幕设备有默认的文本可读性优化，会自动放大SVG内的文本，忽略了SVG的viewBox约束规则。
3. 字体加载延迟导致的 fallback 偏差：移动端网络环境下，PT Serif字体加载可能滞后，浏览器先使用系统 fallback字体渲染，而fallback字体的x-height与PT Serif不一致，后续字体加载完成后未重新调整文本尺寸，最终导致溢出。

修复方案 #

• 替换相对单位为SVG绝对单位：将font-size: 6.9ex改为基于SVG viewBox的px单位（比如font-size: 42px，可根据实际效果微调），彻底避免ex单位的跨端差异。修改后的文本样式：

  text {
    font-family: 'PT Serif', serif;
    font-size: 42px;
    white-space: pre;
    letter-spacing: -0.2px;
  }
  

• 明确SVG显示尺寸：给SVG标签添加width="100%" height="auto"属性，确保SVG在移动端自适应容器宽度，同时保持viewBox的480x480比例，避免容器尺寸引发的缩放偏差：

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="100%" height="auto">
  

• 禁用移动端文本自动缩放：在页面<head>中添加viewport meta标签，限制页面缩放行为，防止浏览器自动放大文本：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 预加载目标字体：在页面头部添加字体预加载链接，确保PT Serif字体优先加载，避免fallback字体导致的尺寸偏差：

  <link rel="preload" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap" as="style">
  

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