Mise à l'échelle d'une police de caractère unique vers sa div parente

Question

J'essaye d'ajuster une taille de police de caractère unique à sa div parente. c'est possible?

Peut-être que c'est un Font scaling based on width of container par @Francesca en double?

Mais mon contexte est Single Character alors peut-être que c'est possible mais la police peut être une police normale ou une police iconique comme font-awesome.

J'apprécie un travail violon

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

Je l'essayer avec un code js mais sa dépend de la largeur ou de la hauteur des parents.

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>