Cómo poner texto en cursiva | Programar Plus

0

HTML y CSS nos ofrecen la posibilidad de poner texto en cursiva. Estoy hablando de mensajes de texto como este. Cubramos todo lo que necesita saber.

¿Qué es el texto en cursiva y por qué lo pondrías en cursiva?

Usas el texto en cursiva con mayor frecuencia para llamar la atención sobre él. Literalmente para enfatizar una palabra, de modo que alguien que lea la oración le dé a esa palabra o frase un empujón adicional, como usted podría pretender como escritor. O podría estar siguiendo una guía de estilo en particular, como poner en cursiva el título de algo, por ejemplo, un artículo publicado.

Utilizar el <em> etiqueta

El “em” en <em> literalmente significa énfasis. Los navegadores, de forma predeterminada, pondrán en cursiva el texto envuelto en HTML <em> etiquetas 

<p>
  That was a <em>wonderful</em> party, Bebe.
</p>

Imagínese el sonido de esa oración, donde el lector está enfatizando esa palabra dándole a la oración una sensación diferente que si no lo hiciera.

Utilizar el <i> etiqueta

El <i> El elemento es aplicar cursiva al texto sin implicar énfasis. Se trata de diferenciar visualmente un texto de otro sin implicar que el lector esté aplicando un peso extra a esas palabras. Quizás algo como:

<p><i>Miranda thought:</i> What an interesting metaphor on the global economy.</p>
<p><i>Chris thought:</i> Is that mustard?</p>

Cuál es la diferencia entre <i> y <em>?

Una vez más:

  • <em> es para enfatizar
  • <i> es para texto en cursiva sin énfasis

Si tiene la tentación de usar <i> para el título de algo, como:

<p>
  The book 
  <!-- Not the end of the world, but... --> 
  <i>Mr. Penumbra's 24-Hour Bookstore</i>
  is good.
</p>

<p>
  The book 
  <!-- ...this is more semantically correct. --> 
  <cite>Mr. Penumbra's 24-Hour Bookstore</cite>
  is good.
</p>

Afortunadamente, los navegadores ponen en cursiva el contenido envuelto en <cite> etiquetas, como <i> lo hace, por lo que no se requiere más trabajo allí si está citando un trabajo (por ejemplo, Moby Dick) o una publicación (por ejemplo, The New York Times).

Utilice su propia clase HTML y CSS

Si el objetivo es diferenciar el texto visualmente, entonces no tenemos que alcanzar el <i> elemento. Los intervalos no tienen significado semántico y se pueden diseñar para dar énfasis visual:

<p>
  Shoes are <span class="emphasis">on sale</span> this week!
</p>
.emphasis {
  background: lightyellow;
  font-style: italic;
}

La propiedad CSS font-style es el que necesita para poner el texto en cursiva, que puede aplicar a cualquier selector que desee.

Cuidado con la “cursiva falsa”

No todas las fuentes tienen caracteres en cursiva. O puede que se encuentre en una situación en la que la versión en cursiva de la fuente no esté cargada. En cualquier caso, el navegador intentará simularlo de todos modos, lo que casi siempre se ve horrible (o al menos mucho peor que usar una fuente real en cursiva).

Nada te advertirá sobre esto, solo necesitas un ojo para ello. Aquí hay un ejemplo de la fuente Merriweather en cursiva falsa:

Cursiva Unicode

Hay un trillón de caracteres disponibles en Unicode, incluidas letras que tienen una vibración en cursiva.

Puede usar esto cuando no tenga control HTML para hacer cosas como cursiva como, por ejemplo, en Twitter al redactar un tweet.

La accesibilidad de esto es terrible. Llegará a cada personaje individualmente, haciendo (presumiblemente, para mí) difícil entender la palabra. Tenga mucho cuidado al usar esto, si es que lo usa todo.

Cursiva en fuentes variables

Este es un concepto un poco avanzado, pero hay cosas llamadas fuentes variables. Ofrecen personalización directamente en el navegador. Entonces, en lugar de un segundo archivo de fuente para la versión en negrita, tienen información para ellos mismos con ese archivo. Pero “negrita” es solo un ejemplo de lo que puede ofrecer una fuente variable. No todos necesariamente lo hacen.

Una fuente variable puede tener una opción “inclinada” o “cursiva” y puede aplicar ese aspecto de esa manera.

v-fonts.com

Ahí está, cinco respuestas diferentes a la pregunta de cuándo poner el texto en cursiva. Con suerte, esto también ayuda con la siguiente pregunta lógica: ¿Qué método debo utilizar?

(Visited 177 times, 1 visits today)