Cambiar la fuente con un botón
ResueltoCaetera Mensajes publicados 234 Fecha de registro Estado Miembro Última intervención -
Hola,
Me gustaría codificar un botón en mi sitio, un botón que me permitiría intercambiar la fuente elegida (Tongari) por una secundaria (OpenDyslexic - adaptada para personas con dislexia). Me gustaría que, al hacer clic en este botón, el texto de la página, escrito en Tongari, se escriba en OpenDyslexic y viceversa, si se vuelve a hacer clic en este botón, el texto regrese a Tongari.
No tengo ninguna formación en código, normalmente me manejo con la consola de desarrollador, pero aquí no sé cómo proceder.
Pensaba en utilizar el evento onclick (no sé si podemos hablar de evento aquí) y el atributo (?) FontFaceSet, pero no he tenido éxito hasta ahora.
De antemano, gracias.
7 respuestas
-
Hola,
Sí, puedes usar una función en un evento onclick para cambiar el estilo de un elemento o del documento entero
document.body.style.fontFamily = "courier" // o para seleccionar un elemento particular document.querySelector('.tu-clase')
-
Hola,
Gracias por la respuesta, lamentablemente no funciona, no entiendo por qué
Quizás sea porque he configurado la fuente Tongari en CSS y hay algún conflicto por ahí?
También he intentado:document.getElementsByTagName("p")Sin éxito tampoco, escribiendo de esta manera:
document.getElementsByTagName('p').style.fontfamily = 'OpenDyslexic' -
Aquí está mi CSS:
@font-face { font-family: 'Tongari'; src: url('https://static1.squarespace.com/static/5d6ffee77121db00017382cf/t/5fadb1f5dd1d4d0520e6013f/1605218805377/tongari-regular.woff') }; h1, h2, p { font-family: 'Tongari'; color: white; }Preciso que utilizo Squarespace
He integrado y definido la fuente OpenDyslexic como sigue:@font-face { font-family: 'OpenDyslexic'; src: url('https://static1.squarespace.com/static/5d6ffee77121db00017382cf/t/63642c053e07f53779e987b8/1667509253648/OpenDyslexic-Regular.otf') };Y en cuanto al botón en sí, he utilizado el evento onclick así:
onclick="document.getElementsByTagName('p').style.fontfamily = 'OpenDyslexic'"-
¡Ok, gracias!
Entonces, para el uso de la fuente, te recomiendo esto:
body { font-family: 'Tongari'; } h1, h2, p { color: white; }Así solo tienes un elemento que seleccionar en tu JS
onclick="document.querySelector('body').style.fontFamily = 'OpenDyslexic'"porque tu getElementsByTagName devuelve un array de elementos, ¡tendrías que aplicar el .style a cada uno de ellos!
Espero que ahora esté más claro.
(y es fontFamily con mayúscula)
-
-
¡Genial! ¡Funciona muy bien, muchas gracias!
Me gustaría ir un poco más lejos, ¿es posible hacer clic una vez más para volver a la fuente original?
Quizás sea necesario escribir una función para eso?
Por ahora, he definido onclick así: (ID siendo AdaptFont)onclick="document.querySelector('body').style.fontFamily = 'OpenDyslexic' ; document.getElementById('AdaptFont').innerHTML = 'Leer con Tongari' ; document.getElementById('AdaptFont').style.fontFamily = 'Tongari'"Me preguntaba si es posible agregar algo para reiniciar el botón, una especie de "click again" o "unclick"
¿Es posible añadir "temporalidad" en onclick? ¿Podría la siguiente línea reiniciar el evento?
document.getElementById('AdaptFont').onclick = null -
He intentado una función pero sin éxito, no me siento cómodo, no sé muy bien cómo configurarlas, sin embargo, intenté esto, sin éxito, el error que se me devuelve es "script desactivado":
<script type="text/javascript"> function FonctionFont('AdaptFont') { if (document.querySelector('body').style.fontFamily = 'Tongari') { document.querySelector('body').style.fontFamily = 'OpenDyslexic' ; document.getElementById('AdaptFont').innerHTML = 'Leer con Tongari' ; document.getElementById('AdaptFont').style.fontFamily = 'Tongari'; } else { document.querySelector('body').style.fontFamily = 'Tongari' ; document.getElementById('AdaptFont').innerHTML = 'Leer con OpenDyslexic' ; document.getElementById('AdaptFont').style.fontFamily = 'OpenDyslexic'; } } </script>Habiendo configurado el evento onclick así:
onclick="FonctionFont('AdaptFont')"-
Dos cosas sobre tu código:
- en el "if" hay que hacer una comparación (== o ===) y no una asignación (=)
- has puesto un parámetro en la función pero no lo usas:
onclick="maFonction('truc')" // y recuperarlo con function maFonction(variableTruc) { element.blabla.fontFamily = variableTruc }// o más simplemente un toggle onclick="toggle()" function toggle() { si font == A: asignar font B sino asignar font A } // y otra función para reiniciar onclick="reset()" // en la que pones la fuente por defecto
-
-
¡Muchas gracias, funciona, todo está bien! Genial
He utilizado el interruptor con onclick=toggle()
En el if, ¿existe alguna diferencia entre == y ===? A grandes rasgos, ¿es lo mismo?
Ok, entiendo el parámetro no utilizado en la función, gracias por todas estas precisiones y el tiempo que me han dedicado :)-
Hola,
la diferencia entre == (compara si son iguales) y === (compara si son iguales estrictamente) es que la igualdad con == es más tolerante que la igualdad estricta.
Por ejemplo, con una igualdad "simple", si ambos lados (a la izquierda y a la derecha del doble igual) son iguales, pero con una tolerancia en la comparación:
'0' == 0 //-- compara la cadena de caracteres 0 y el número 0 ==> devuelve true
mientras que
'0' === 0 //-- una cadena de caracteres es diferente de un número ==> devuelve false
Este es solo un ejemplo que ilustra la diferencia entre la igualdad "simple" y la estricta, pero hay muchos otros casos donde el doble igual es más permisivo y el triple igual requiere que los dos términos de la comparación sean estrictamente idénticos. Así que ambos tienen su utilidad según el contexto (ser más permisivo para probar o requerir una estricta igualdad de los términos).
El parámetro es lo que hay entre corchetes. Debería ser una variable y no una cadena de caracteres. Es innecesario si no se utiliza.
<span>FuncionFuente('AdaptarFuente')</span>En lugar de nombrar sus funciones FuncionesFuente, den nombres que signifiquen algo, una función se reconoce fácilmente en su creación ya que va precedida de la palabra clave "function" y cuando se utiliza, el nombre va seguido de paréntesis con o sin parámetros: FuncionFuente(); o FuncionFuente('cadena de caracteres');
Por ejemplo aquí:
function cambiarFuente(){
//-- lo que hace la función ...
}
y al releer incluso en varios meses (o por otra persona) se entiende fácilmente lo que hace la función. Es un hábito simple y práctico que hace que el código sea legible y comprensible, así que mejor no privarse de ello.
Ejemplo de una función utilizando un parámetro correctamente (y explícitamente de paso):
function reemplazarFuente(nuevaFuente){ document.querySelector('body').style.fontFamily=nuevaFuente } //-- se utiliza así: reemplazarFuente('arial')/** asigna al body el estilo font-family='arial' y reemplaza o suple el anterior */nota: es mejor utilizar .addEventListener (en lugar del atributo onclick) y usar clases para cambiar el estilo, como ya indicó Grandasse_
Ambos son más flexibles, más claros y fáciles de cambiar.
addEventListener porque el código no se separa en 2 partes (una en las etiquetas script y la otra en el atributo de una etiqueta HTML), además al usar una función nombrada se puede cambiar o eliminar lo que hace el botón, por ejemplo, reemplazando la función por otra en el addEventListener (me parece que antes de usar un toggle era su primera idea). Esto no es realmente factible en atributos de elementos HTML (o de lo contrario hay que complicarse la vida).
Al usar una clase para una fuente y otra para la otra, solo es necesario cambiar el CSS para cambiar la fuente y además se pueden agregar otras propiedades CSS.
También es importante si se utilizan fuentes exóticas o no convencionales (como aquí) añadir fuentes de reemplazo.
Si el usuario no tiene en los archivos de fuente de su computadora las fuentes Tongari o OpenDyslexic, no sirve de nada porque no verá ninguna de las fuentes.
Así que al cambiar la clase CSS se vuelve más simple:
.fuenteBase{
font-family: tongari, arial;
}
.fuenteAlternativa{
font-family: OpenDyslexic, times;
}
Y así la expresión en la función se convierte en:
document.querySelector('body').className=fuenteAlternativa;
y para volver (y en un toggle):
document.querySelector('body').className=fuenteBase;
Más simple (y más rápido de escribir) que tener que reescribir las 2 fuentes cada vez usando .style.fontFamily=...
-
-
Gracias por todas estas precisiones, se aprecia mucho.
