Establecer borde de fuente en CSS

1. Utilice la propiedad -webkit-text-stroke para aplicar bordes a la fuente en CSS
2. Utilice la propiedad text-shadow para aplicar bordes a la fuente en CSS

Este tutorial presentará métodos para aplicar bordes y colores a la fuente en CSS.

Utilice la propiedad -webkit-text-stroke para aplicar bordes a la fuente en CSS

Podemos usar la propiedad text-stroke en un texto para aplicar bordes a una fuente en CSS. Necesitamos usar el prefijo webkit antes de la propiedad text-stroke para usar la función. Sin embargo, solo funciona en los navegadores basados ​​en web-kit como Safari y Chrome. La propiedad text-stroke nos permite decorar el texto en aplicaciones de dibujo vectorial como Adobe Illustrator. La propiedad es la abreviatura de las otras dos propiedades, text-stroke-width y text-stroke-color. Por lo tanto, podemos definir el ancho y el color del borde de un texto con la propiedad text-stroke.

Por ejemplo, escriba algo de texto dentro de la etiqueta h1 en HTML. En CSS, seleccione la etiqueta h1 y aplique la propiedad -webkit-text-stroke. Establezca el ancho en 1px y el color en red. Luego, establezca la fuente en arial usando la propiedad font-family y dé el color green.

El siguiente ejemplo mostrará un texto de color verde que tiene un borde de color rojo. Así es como podemos establecer bordes en una fuente con un color diferente.

Código de ejemplo:

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

Utilice la propiedad text-shadow para aplicar bordes a la fuente en CSS

Podemos emular la propiedad text-stroke usando la propiedad text-shadow para aplicar un borde a la fuente en CSS. La propiedad text-shadow se utiliza para crear una sombra en un texto. Los dos primeros valores denotan las propiedades h-shadow y v-shadow. Denotan la posición de la sombra horizontal y vertical. Podemos establecer el valor blur-radius como el tercer valor en la propiedad text-shadow. Difuminará la sombra de la posición dada con el radio dado. Podemos especificar el color de la sombra, convirtiéndolo en el cuarto valor en la propiedad text-shadow. Este método funciona en la mayoría de los navegadores.

Por ejemplo, escriba algo de texto dentro de la etiqueta h1 en HTML. En CSS, seleccione la etiqueta h1 y escriba la propiedad text-shadow. Dé el valor 0 para las propiedades h-shadow y v-shadow. Escriba 2px para blur-radius y dé el color red.

Emulamos la función de borde en una fuente usando la propiedad text-shadow en el siguiente ejemplo. Establecemos el valor 0 para el radio horizontal y vertical para que la sombra parezca un borde al darle el color a la sombra.

Código de ejemplo:

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}