如果你想要一个响应的字体大小，那么你也可以使用视图宽度，不需要使用calc或rem。
只需更改此选项，以便您可以试用：

HTML {
  font-size: 5vw;
}

视图宽度从0到100，这样您就可以知道需要使用多少空间。
编辑：我个人还没有找到如何在两个轴上缩放，但在大多数情况下，X轴就足够了。

下面是我从Creating a Fluid Type Scale with CSS Clamp获得的一个流畅字体解决方案
经过一些调整后，我得到了下面的Sass代码来生成clamp函数。

/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.  
   Focused on font-size, but may be used for margins and padding

   Usage:  
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);    
      font-size: clamped(26px, 36px);      //using width default values
Output:
    font-size: clamp(1.63rem, 1.11vw + 1.28rem, 2.25rem);

*/

@use "sass:math";
@use "sass:map";

// Default min-mix browser width values for clamped function
$default-min-bp: 500px;           
$default-max-bp: 1400px;           

// Convert pixels to rems.
@function to-rems($px) {
  $rems: math.div($px, 16px) * 1rem;
  @return $rems;
}

//round a to number of decimal places.
@function rnd($number, $places: 0) {
  $n: 1;
  @if $places > 0 {
    @for $i from 1 through $places {
      $n: $n * 10;
    }
  }
  @return math.div(math.round($number * $n), $n);
}

// Generate css for clamp
@function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
  $slope: math.div($max-px - $min-px, $max-bp - $min-bp);
  $slope-vw: rnd($slope * 100, 2);
  $intercept-rems: rnd(to-rems($min-px - $slope * $min-bp), 2);
  $min-rems: rnd(to-rems($min-px), 2);
  $max-rems: rnd(to-rems($max-px), 2);
  @return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
}