求助：用CSS实现30%扇形容器、AP字符融合及文字嵌入排版

想要在约30%的扇形（非完整圆形）内嵌入「AP GRAPHICS」文字，实现字母A与P的融合效果。目前已通过CSS实现响应式四分之一扇形并嵌入文字，但达不到目标效果，也不清楚所需字体，作为CSS新手寻求技术指导。

<html>
<head>
<title>
    AP Graphis
</title>
<style>
    .quarter{
    position: relative;
    width: 20vw;
    height: 20vw;
    border-top-right-radius:0;
    border-top-left-radius:0;
    border-bottom-right-radius:100%;
    border-bottom-left-radius:0;
    background: orange;
}
</style>
</head>
<body>
    <h1 class="quarter" style="color: white;"><br>&nbsp;<u>AP GRAPHICS</u></h1>
</body>
</html>

1. 实现30%扇形 #

四分之一扇形对应90度，30%扇形对应108度（360°×0.3），纯border-radius无法实现非直角扇形，推荐用clip-path裁剪：

.sector-30 {
  width: 20vw;
  height: 20vw;
  background: orange;
  /* 基于圆心(50%,50%)，裁剪出0°到108°的扇形 */
  clip-path: polygon(50% 50%, 100% 50%, 34.5% 97.5%, 50% 50%);
}

坐标由三角函数计算得出，确保扇形弧度与目标图匹配。

2. 文字沿扇形弧度排列 #

纯CSS实现文字沿弧排列难度高，用SVG的textPath更简便，可让文字精准贴合扇形圆弧：

• 先定义与扇形匹配的圆弧路径
• 让文字沿着路径渲染

3. AP字母融合效果 #

通过调整P字母的偏移量，使其与A的右侧部分重叠，实现视觉上的融合。

4. 匹配目标字体 #

目标图字体为粗体无衬线风格，推荐使用谷歌字体的「Anton」，风格高度接近，直接引入即可。

<html>
<head>
  <title>AP GRAPHICS</title>
  <!-- 引入Anton字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 20px;
    }
    .ap-container {
      width: 20vw;
      height: 20vw;
      position: relative;
    }
    /* 30%扇形 */
    .sector-30 {
      width: 100%;
      height: 100%;
      background: orange;
      clip-path: polygon(50% 50%, 100% 50%, 34.5% 97.5%, 50% 50%);
    }
    /* SVG文字容器 */
    .arc-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .arc-text text {
      font-family: 'Anton', sans-serif;
      font-size: 1.8vw;
      fill: white;
    }
    /* AP融合：向左偏移P字母 */
    .letter-p {
      dx: -0.8vw;
    }
  </style>
</head>
<body>
  <div class="ap-container">
    <div class="sector-30"></div>
    <svg class="arc-text" viewBox="0 0 100 100">
      <!-- 定义与扇形匹配的圆弧路径 -->
      <path id="arc" d="M 95 50 A 45 45 0 0 1 34.5 97.5" fill="none" />
      <text>
        <textPath href="#arc">
          <tspan>A</tspan>
          <tspan class="letter-p">P</tspan>
          <tspan> GRAPHICS</tspan>
        </textPath>
      </text>
    </svg>
  </div>
</body>
</html>

• 扇形尺寸用vw单位保持响应式，可根据需求调整大小
• 若需调整扇形角度，可重新计算clip-path和SVG路径的坐标
• 字体大小和偏移量可根据实际显示效果微调

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