將單個字體字體縮放到其父部分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>