将单个字体字体缩放到其父部分div

Question

我正在尝试将单个字体字体大小适合其父部分。可能吗？

也许这是一个Font scaling based on width of container 由@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>