将单个字符字体缩放到其父 div

Question

我正在尝试将单个字符的字体大小适合其父 div。有可能吗？

也许是Font scaling based on width of container by @Francesca 重复？

但我的上下文是单字符，所以也许有可能，但字体可以是普通字体系列或像 font-awesome 这样的标志性字体。

我很欣赏小提琴作品

body {
  font-size: 10px;
  font-family: Arial
}

.box1 {
  border: 1px solid red;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 4vw;
}

.box2 {
  border: 1px solid blue;
  margin: 10px;
  width: 200px;
  height: 200px;
  font-size: calc(3vw + 3vh);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>

Answer 1

我用一些 js 代码尝试过，但它取决于父母的宽度或高度。

 var fontSize = parseInt($(".box1").height())+"px";
 $(".box1").css('font-size', fontSize);
 
  var fontSize = parseInt($(".box2").height())+"px";
 $(".box2").css('font-size', fontSize);

body {
  font-size: 10px;
  font-family: Arial
}

.box1 {
  border: 1px solid red;
  margin: 10px;
  width: 50px;
  height: 50px;  
  text-align:center;
  line-height: 45px;
}

.box2 {
  border: 1px solid blue;
  margin: 10px;
  width: 200px;
  height: 200px; 
  text-align:center;  
}
.box2 i {
  display: block;
  line-height: 97%;
  vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>