Inquiry Regarding Significant Character Spacing Changes in PingFang Font within WebKit on iOS 18 for H5 Content

Question

aldrich951 OP

Created Jul ’24

Replies 2

Boosts 0

Participants 2

Dear Apple Support Team,

Upon upgrading to iOS 18, I have noticed a marked change in the character spacing of the PingFang font when rendered by WebKit, the web content rendering engine utilized by Safari and other web views in iOS. Specifically, the spacing between characters appears to have increased or altered in a manner that is not consistent with previous iOS versions or with the font's specifications as defined in CSS. This issue has significantly impacted the visual presentation of my web pages, causing a notable deviation from the intended design and potentially affecting user experience.

Expected Behavior: The character spacing of PingFang font in WebKit on iOS 18 should maintain consistency with previous versions or adhere strictly to CSS specifications, ensuring a seamless transition for web developers and end-users alike.

Request for Assistance: Could you please investigate this issue and confirm if it is a known bug or an intentional change in iOS 18? If it's a bug, could you provide an estimated timeline for a fix or a workaround that we can implement in the meantime? Additionally, any guidance on how to best address this issue in our H5 content, such as alternative font choices or CSS hacks, would be greatly appreciated. Thank you for your attention to this matter. We value the stability and consistency of the WebKit engine and the overall iOS platform, and we look forward to your prompt response and resolution.

Boost

Answer 1

Engineer OP

Apple

Jul ’24

Hi! Thanks for reporting this problem. Do you have an example of web page code that would re-create the problem? Does it affect all elements using PingFang, or only show up in certain cases?

0

Answer 2

aldrich951 OP

2w

<html>
<head>
  <meta charset="utf-8">
  <style>
    body{
      padding-top: 100px;
    }
    .box {
      font-size: 40px;
      margin: 50px auto;
      width: 80%;
    }

    .bold {
      font-weight: bold;
    }
    .test0 {
      font-family: "PingFang SC";
    }

    .test1 {
      font-family: "PingFangSC-Regular";
    }
    
    .test2 {
      font-family: "Heiti SC";
    }

    .test3 {
      font-family: "serif";
    }
  </style>
</head>

<body>
    <div class="box bold">
      <div class="test0">限时抢 PingFang SC</div>
      <div class="test1">限时抢 PingFangSC-Regular</div>
      <div class="test2">限时抢 Heiti SC</div>
      <div class="test3">限时抢 serif</div>
    </div>

    <div class="box bold">
      <div class="test0">1234567890 PingFang SC</div>
      <div class="test1">1234567890 PingFangSC-Regular</div>
      <div class="test2">1234567890 Heiti SC</div>
      <div class="test3">1234567890 serif</div>
    </div>

    <div class="box">
      <div class="test0">限时抢 1234567890 PingFang SC</div>
      <div class="test1">限时抢 1234567890 PingFangSC-Regular</div>
      <div class="test2">限时抢 1234567890 Heiti SC</div>
      <div class="test3">限时抢 1234567890 serif</div>
    </div>
</body>
</html>

This is the result of comparing screenshots of iOS 15 and iOS 18 together

0