necesito poder tener un selector de opciones que según la selección, cambie el estilo de fuente, con referencia a la selección. he encontrado una web que lo hace y estoy tratando de usar sus recursos Html pero en script no sé que hacer. https://www.invias.gov.co/index.php/solicitud-de-citas-y-turnos-web
Cuando se selecciona el menos o el más, la web cambia su tipografía en cuanto a tamaño, inmediatamente se escogen las opciones, igual lo hace con el tipo de fuente, sé que según la selección, se habilita una hoja de estilos que tiene ese formato, por ahora, necesito es poder cambiar las opciones y capturar algún dato para crear la condición.
.article-tools ul {
list-style: none;
margin: 0;
padding: 0;
}
.article-tools ul li {
border-bottom: 1px dotted #e5e5e5;
padding: 6px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-tools ul li:before,
.article-tools ul li:after {
display: table;
content: " ";
}
.article-tools .typo-tools .btn {
display: block;
float: left;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}
.article-tools ul li a {
color: #333333;
font-weight: 400;
text-transform: uppercase;
}
.article-tools .typo-tools strong {
display: block;
float: left;
font-weight: 400;
width: 96px;
line-height: 22px;
text-align: center;
text-transform: uppercase;
}
<section class="article-full has-article-tools">
<div class="article-tools">
<div class="typo-tools">
<ul>
<li data-fss="Smaller,Small,Medium,Big,Bigger">
<a class="btn" href="#" title="Fuente menor" data-value="-1" data-target=".article" data-action="nextPrev" data-key="fs">-</a>
<strong>Medium</strong>
<a class="btn" href="#" title="Fuente Mayor" data-value="+1" data-target=".article" data-action="nextPrev" data-key="fs" data-default="Medium">+</a>
</li>
<li data-fonts="Default,Helvetica,Segoe,Georgia,Times" data-loop="true">
<a class="btn" href="#" title="Estilo anterior" data-value="-1" data-target=".article" data-action="nextPrev" data-key="font"><</a>
<strong>Default</strong>
<a class="btn" href="#" title="Estilo siguiente" data-value="+1" data-target=".article" data-action="nextPrev" data-key="font" data-default="Default">></a>
</li>
<li class="toggle-reading">
<a class="toggle off" href="#" title="Modo Lectura" data-action="onOff" data-value="reading-mode" data-default="off" data-target="html" data-key="reading-mode" data-cookie="no"> <i class="fa fa-newspaper-o visible-xs"></i><span class="hidden-xs">Modo Lectura<span></span></span></a>
</li>
</ul>
</div>
</div>
</section>