Ciao a tutti!!
Ho un problema...e sono quasi certa che esista una soluzione + furba e veloce della mia...o almeno spero!!Mi potete aiutare x favore?

Io vorrei cambiare il carattere dei campi inseriti in un'area tramite caselle di input, ma x il momento sto creando una classe per ogni tipo di carattere e per ogni tipo di dimensione carattere...xò diventa un css gigantesco...oltretutto devo creare una marea di funzioni per applicare le modifiche...e non so se ciò abbia un senso...

Per capire meglio:
Questa è la mia pagina html:

codice:
<html>
<head>
<title>Prova per cambiare carattere</title>
<style type=text/css>@import url("cambiacarattere.css");
</style>

<script type="text/javascript">
function copia(ff) {
  document.getElementById('nome').innerHTML = ff.nome.value + "
";
 }
 

function verdana10(ff) {
document.getElementById('nome').className = 'nome_verdana10'; return false;
}

function times10(ff) {
document.getElementById('nome').className = 'nome_times10'; return false;
}

function verdana12(ff) {
document.getElementById('nome').className = 'nome_verdana12'; return false;
}

function times12(ff) {
document.getElementById('nome').className = 'nome_times12'; return false;
}

function verdana14(ff) {
document.getElementById('nome').className = 'nome_verdana14'; return false;
}

function times14(ff) {
document.getElementById('nome').className = 'nome_times14'; return false;
}

</script>


</head>
<body bgcolor="#FFFFFF" text="#000000">


<div class="nome" id="nome">Testo inserito
</div>
    

<form><table width="30%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td> 

      </td>
      <td> 
        <input name="nome" onblur="copia(this.form);" size="45" maxlength="40" />
      </td>
    </tr>
    
  </table>
 
 
</form> 



Verdana 10pt - Times 10pt</p>


Verdana 12pt - Times 12pt</p>


Verdana 14pt - Times 14pt</p>
</body>
</html>

e questo è il css collegato (si deve chiamare cambiacarattere.css)

codice:
div.nome {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_verdana10 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_verdana12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}


div.nome_verdana14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}


div.nome_times10 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_times12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_times14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}
E' proprio necessario che io crei una classe e una funzione per ogni tipo di font e di dimensione carattere di tale font, o c'e' un metodo + semplice e veloce per cambiare solo tale parametro?

Considerate che nell'esempio c'e' solo il campo nome, ma ci dovranno essere molti altri campi, ognuno formattabile singolarmente...quindi diventerebbe un lavorone gigantesco... :master:
Per favore aiutatemiiiiiii!!!
Grazie 10000!!!!