Las fuentes en la web son esencialmente gráficos basados en vectores. Por eso puedes mostrarlas a 12px o 120px y siguen siendo nítidas y con bordes relativamente definidos. Vectorial significa que su forma está determinada por puntos y matemáticas para describir la forma, en lugar de datos de píxeles reales. Como son vectoriales, tendría sentido que pudiéramos hacer cosas que otros programas vectoriales (por ejemplo, Adobe Illustrator) pueden hacer con el texto vectorial, como dibujar un trazo alrededor de los caracteres individuales. Pues bien, ¡podemos hacerlo! Ejemplo:
h1 { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}
O abreviatura:
h1 { -webkit-text-stroke: 1px black;}
Puede que estés pensando «Genial, pero si sólo algunos navegadores soportan esto, si pongo mi color de texto en white
y mi fondo es white
, ¡el trazo hace que se vea bien en los navegadores que lo soportan pero desaparece por completo en los que no lo soportan!»
Una posibilidad es esta:
h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}
Mostrado aquí con la fuente @font-face Anime Ace 2 de Nate Piekos:
Otra posibilidad es que sólo se aplique cuando sea compatible:
@supports (-webkit-text-stroke: 1px black) { h1 { -webkit-text-stroke: 1px black; -webkit-text-fill-color: white; }}
Soporte
Estos datos de soporte de los navegadores son de Caniuse, que tiene más detalles. Un número indica que el navegador soporta la función a partir de esa versión.
Escritorio
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 49* | No | 15* | 3.1* |
Móviles / Tabletas
Android Firefox | Android | iOS Safari | |
---|---|---|---|
89* | 86* | 2.1* | 4,0-4,1* |
Simulación
Podemos llevar esto un poco más lejos al no depender del WebKit propietario por completo. Podemos utilizar la propiedad text-shadow
(soportada también en Firefox, Opera e IE 10) y simular un trazo. Utilizaremos cuatro sombras, cada una de ellas con un desplazamiento de 1px de negro sin propagación, una en la parte superior derecha, otra en la parte superior izquierda, otra en la parte inferior izquierda y otra en la parte inferior derecha. Vamos a eliminar el -webkit-text-fill-color
propietario de WebKit en favor de color
ya que ahora somos compatibles con todos los navegadores. La única excepción sería IE9 y posteriores, que por supuesto puedes usar hojas de estilo específicas para IE.
h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Combinando
Usar tanto un trazo como una sombra puede ser un gran efecto. Vamos a echar mano de un trazo WebKit, el trazo de sombra de texto de todo tipo, así como de un trazo de sombra de texto más profundo.
h1 { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Demostración
Ver la pluma
Texto troquelado con alternativas por CSS-Tricks (@css-tricks)
en CodePen.
Alineación
Si estás familiarizado con Adobe Illustrator, sabrás que puedes alinear un trazo en el interior de una forma, en el exterior o centrado. Esa opción se ve así en la paleta:
Por razones que desconozco, el texto en Illustrator sólo puede establecerse con alineación de trazo central también. Sin embargo, una vez que se expande el texto en trazados vectoriales regulares, las tres opciones están disponibles. Recordatorio de Sam Frysteen: añade un nuevo trazo en el panel Apariencia y muévelo por debajo de tu texto (básicamente imita la alineación de trazo exterior).
Sólo la alineación del trazo del texto exterior me parece buena. Es lamentable, tanto para CSS como para Illustrator, que el valor predeterminado inmutable sea centrado. La solución es no volverse demasiado loco con el grosor del borde del trazo y las cosas deberían estar bien. Nota: la solución de sólo sombra de texto no tiene este problema, pero tampoco puede trazar más de 1px.
paint-order
te permite esencialmente tener trazos exteriores, una vez que más navegadores lo soportan.Lo que no podemos hacer
Hay otras cosas que los programas gráficos basados en vectores pueden hacer con el texto. Pueden aplastar la letra horizontalmente / estirarlas verticalmente. Este tipo de tratamiento del texto está casi universalmente mal visto, así que no es una gran pérdida que no podamos hacer eso. También puedes poner el tipo en una línea irregular (como alrededor de un círculo). Ciertamente sería genial hacer esto con el texto de la web. Tal vez podríamos configurar el texto para que siga la trayectoria del borde de su elemento padre.
p.circular { width: 200px; height: 200px; border-radius: 100px; /* NOT REAL */ text-align: border-path;}
En Illustrator, también podemos decirle a un trazo cómo manejar las esquinas afiladas: redondeadas, biseladas o en inglete. Estos pueden tener bonitos efectos, no son posibles en la web. Sin embargo, el manejo de las esquinas por parte de WebKit es bastante bueno por defecto (sea lo que sea), y podría decirse que es mejor que cualquiera de las opciones de Illustrator.
Fancies
Para que conste, puedes usar cualquier tipo de valor de color para el color del trazo (hex, rgba, hsla, palabra clave). Eso significa trazos transparentes si los quieres, que efectivamente se «apilan» en el sentido de que si los trazos se superponen entre sí (común) serán más oscuros.
En cuanto a la animación de los fotogramas clave, el color del trazo se animará pero el ancho del trazo no (raro).
/* Only the color will change, not the width */@keyframes colorchange { 0% { -webkit-text-stroke: 10px red; } 100% { -webkit-text-stroke: 20px green; }}