Cambiar la familia de fuentes css por opciones separadas en la etiqueta de selección

No sé si esto es posible, y si no, si alguien puede descartar ideas opcionales, pero estoy intentando mostrar un menú desplegable de diferentes fuentes (específicamente, fuentes del directorio de fuentes de Google) en una etiqueta de selección. En el menú desplegable, que estoy tratando de mostrar una vista previa de peinar cada opción con el tipo de letra que representaCambiar la familia de fuentes css por opciones separadas en la etiqueta de selección

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

Esto no parece estar funcionando, sin embargo. ¿Alguna pista de por qué o cómo solucionarlo?

Fuente

2011-01-12 Dandy

en caso de que alguien se está ejecutando en un problema similar: IE9 (al menos) parece ignorar 'configuración de fuente-size' cuando están ligados a la opción - pero Will toma el 'font-size' cuando está unido al' select'. –

No se puede establecer la fuente de la etiqueta <option> pero se puede crear una lista con los estilos específicos (como era de esperar)

Aquí es todo lo que he estado intentando:

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine"); 
 
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma"); 
 
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");

h1 { 
 
    font-size: 1.2em; 
 
    margin-top: 10px; 
 
    color: #777; 
 
} 
 
.tangerine { 
 
    font-family: tangerine; 
 
} 
 
.tahoma { 
 
    font-family: tahoma; 
 
} 
 
.timesnewroman { 
 
    font-family: times new roman; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<h1>Set with jQuery</h2> 
 
<select id="js"> 
 
    <option>Tangerine</option> 
 
    <option>Tahoma</option> 
 
    <option>Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>Set with CSS</h2> 
 
<select id="css"> 
 
    <option class="tangerine">Tangerine</option> 
 
    <option class="tahoma">Tahoma</option> 
 
    <option class="timesnewroman">Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>List</h2> 
 
<ul> 
 
    <li>Tangerine</li> 
 
    <li>Tahoma</li> 
 
    <li>Times New Roman</li> 
 
</ul>

Fuente

2011-01-12 19:16:50 hunter

¿podría hacer que esto funcione en el navegador Chrome? – matthewb

El CSS funciona para mí en Chrome 58 (en Linux), ¡lindo! –

¿Tal vez puedas usar javascript? ¿Puedes probar esto?

<script> 
myObj = document.getElementById("tahoma"); 
myObj.style.font = "Tahoma"; 
myObj.style.color = "red"; 

// Change anything else that you like! 
</script> 

<option id="tahoma .....>

Fuente

2011-01-12 19:16:56 Eray

no funciona aquí: http://jsfiddle.net/95TVh/1/ – hunter

¿qué navegador está utilizando? Estoy usando Firefox y está funcionando. – Eray

FF reconoce las fuentes en las opciones, pero la mayoría de los navegadores no lo hacen en – hunter

He utilizado un método de hackish para hacerlo.

Como necesitaba un estilo para la etiqueta de selección y quería personalizar un par de cosas más, utilicé el complemento Elegir con estilo para jQuery y adjunté el atributo font-family css al elemento principal (que era una etiqueta de lista).

Eso funcionó con poco código y fue compatible con varios navegadores.

Fuente

2011-01-12 20:45:23 Dandy

Usted debe envolver cada option etiqueta en un estilo optgroup etiqueta y luego que a medida:

<select> 
 

 
    <optgroup style="font-family:arial"> 
 
    <option>Arial</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:verdana"> 
 
    <option>veranda</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:other"> 
 
    <option>other</option> 
 
    </optgroup> 
 

 
</select>

Fuente

2012-08-23 14:31:45

que no funciona trabajo :( – ppumkin

Funciona para mí. Impresionante! –

Esto funciona, pero ¿hay alguna manera de eliminar la brecha entre las opciones y, lo que es más importante, esa sangría en la penúltima opción (parece ser siempre penúltima)? – Goose

simplemente Puede usar como esto

<select id='lstFonts' class='form-control'> 
    <option style="font-family:Arial" value="Arial">Arial</option> 
    <option style="font-family:Verdana" value="Verdana">Arial</option> 
</select>

Fuente

2016-07-30 11:21:31

Dar el nombre de la fuente al valor de la opción. Entonces puedes configurarlos con jquery.

Aquí se muestra un ejemplo:

Puede añadir nueva fuente fácilmente así:

<option value="myFontName">My Font Name</option>

$("#selectfont").each(function(){ 
 
    $(this).children("option").each(function(){ 
 
    $(this).css("fontFamily",this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<select id="selectfont"> 
 
<option value="tangerine">Tangerine</option> 
 
<option value="tahoma">Tahoma</option> 
 
<option value="times new roman">Times New Roman</option> 
 
</select>

Fuente

2016-11-01 08:31:07 Nezih

Todas las opciones mencionadas anteriormente ni de cosa correcta visualización en OSX Safari. He conseguido cosas correctas mediante el uso de rutina de carga:

<!DOCTYPE html> 
    <html lang="nl"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>font test</title> 
    <meta name="generator" content="BBEdit 10.5" /> 
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async /> 
    </head> 
    <body> 
    <style> 
    @font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;} 
    .edwardian{font-family: edwardian; font-size: 30px;} 

    .arial{font-family: arial;} 
    .times{font-family: times;} 
    .verdana{font-family: verdana;} 
    .helvetica{font-family: helvetica;} 
    </style> 
    <div id="fontdropdown1" class="dropdown" style="width: 300px;"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" class="times">Times</a></li> 
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li> 
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li> 
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li> 
    </ul> 
    </div> 
    <!-- test font dropdown --> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script> 
    </body> 
    </html>

Fuente

2018-03-04 08:56:23

Cambiar la familia de fuentes css por opciones separadas en la etiqueta de selección

Respuesta

Cuestiones relacionadas