Quisiera que a medida que el numero de puntos otorgados valla creciendo la fuente valla disminuyendo o aumentando
ejemplo: si esta en un rango de 1 a 999,999 la fuente aumente
si este supera los 999,999 la fuente disminuya
function myFunction() {
document.getElementById("contaPuntos").innerHTML = Math.floor(Math.random() * 10000000) + 1;
}
.z1 {
height: 159px;
}
.title-estadistica {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
}
.count-estadistica {
font-size: 2.9em;
margin-top: 12px;
font-weight: 700;
}
.desc-estadistica {
font-size: 12px;
}
<div class="row panel z1 panel" style="background: #67c2ef; border-color: #39afea; color: white">
<div class="panel-body">
<i class="glyphicon glyphicon-certificate icon-estadistica"></i>
<div class="title-estadistica">Puntos Otorgados</div>
<div class="count-estadistica" id="contaPuntos">133600<i class="glyphicon glyphicon-chevron-down"></i></div>
<div class="desc-estadistica" id="descPuntos">Disminución del 7 %</div>
</div>
</div>
<button onclick="myFunction()">Click me</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>