family - font weight css
CSS fuente de frontera? (9)
Con todo lo nuevo en el borde de CSS3 ( -webkit , ...) ¿ahora es posible agregar un borde a la fuente? (Como el borde blanco sólido alrededor del logo azul de Twitter). Si no es así, ¿hay algún hacks no demasiado feos que logren esto en CSS / XHTML o todavía necesito iniciar Photoshop?
ACTUALIZAR
Aquí hay una combinación de SCSS para generar el trazo: http://codepen.io/pixelass/pen/gbGZYL
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color
/// @return {List} - text-shadow list
@function stroke($stroke, $color) {
$shadow: ();
$from: $stroke*-1;
@for $i from $from through $stroke {
@for $j from $from through $stroke {
$shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
}
}
@return $shadow;
}
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color
/// @return {Style} - text-shadow
@mixin stroke($stroke, $color) {
text-shadow: stroke($stroke, $color);
}
SI vieja pregunta .. con respuestas aceptadas (y buenas) ..
PERO ... En caso de que alguien lo necesite y odie escribir código ...
ESTE es un borde negro de 2px con compatibilidad con CrossBrowser (no IE). Necesitaba esto para las fuentes @fontface, así que tenía que ser más limpio que las respuestas anteriores ... Tomo cada lado de la imagen para asegurarse de que (casi) no haya espacios para " Fuzzy "(handrawn o similar) fuentes. Se podrían agregar subpíxeles (0.5 px) pero no los necesito.
Código largo solo para la frontera ??? ...¡¡¡SÍ!!!
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000,
0px 1px 0 #000,
0px -1px 0 #000,
-1px 0px 0 #000,
1px 0px 0 #000,
2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000,
0px 2px 0 #000,
0px -2px 0 #000,
-2px 0px 0 #000,
2px 0px 0 #000,
1px 2px 0 #000,
-1px 2px 0 #000,
1px -2px 0 #000,
-1px -2px 0 #000,
2px 1px 0 #000,
-2px 1px 0 #000,
2px -1px 0 #000,
-2px -1px 0 #000;
Stroke font-character con un menor mixin
Aquí hay una mezcla MENOS para generar el trazo: http://codepen.io/anon/pen/BNYGBy?editors=110
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color
/// @return {List} - text-shadow list
.stroke(@stroke, @color) {
@maxi: @stroke + 1;
.i-loop (@i) when (@i > 0) {
@maxj: @stroke + 1;
.j-loop (@j) when (@j > 0) {
text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color;
text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color;
text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color;
text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color;
.j-loop(@j - 1);
}
.j-loop (0) {}
.j-loop(@maxj);
.i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@maxi);
text-shadow+: 0 0 0 @color;
}
(Se basa en la respuesta de pixelass que en su lugar usa SCSS)
Esto es lo que estoy usando:
.text_with_1px_border
{
text-shadow:
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000;
}
.text_with_2px_border
{
text-shadow:
/* first layer at 1px */
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000,
/* second layer at 2px */
-2px -2px 0px #000,
-1px -2px 0px #000,
0px -2px 0px #000,
1px -2px 0px #000,
2px -2px 0px #000,
2px -1px 0px #000,
2px 0px 0px #000,
2px 1px 0px #000,
2px 2px 0px #000,
1px 2px 0px #000,
0px 2px 0px #000,
-1px 2px 0px #000,
-2px 2px 0px #000,
-2px 1px 0px #000,
-2px 0px 0px #000,
-2px -1px 0px #000;
}
La respuesta correcta es:
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Hello World</h1>
Esto establecerá cuatro sombras del mismo tipo desde los cuatro lados.
Para elaborar más sobre algunas respuestas que han mencionado -webkit-text-stroke, aquí está el código para que funcione:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
Un artículo detallado sobre el uso del trazo de texto está here y una lista de navegadores que admiten el trazo de texto here .
Parece que hay una propiedad de ''golpe de texto'', pero (al menos para mí) solo funciona en Safari.
Tal vez podría emular un trazo de texto, utilizando la text-shadow css (o -webkit-text-shadow / -moz-text-shadow ) y un desenfoque muy bajo:
#element
{
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset ''blur'' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
Pero mientras esto está más disponible que la -webkit-text-stroke , dudo que esté disponible para la mayoría de los usuarios, pero eso podría no ser un problema (degradación elegante y todo eso).
Una vez intenté hacer esas esquinas redondas y soltar sombras con css3. Más tarde, encontré que aún es mal soportado (¡por supuesto, Internet Explorer (s)!)
Terminé tratando de hacer eso en JS (lienzo HTML con IE Canvas), pero tiene un gran impacto en el rendimiento (incluso en mi máquina C2D). En resumen, si realmente necesita el efecto, considere las bibliotecas JS (la mayoría de ellas deberían poder ejecutarse en IE6) pero no exagere debido a problemas de rendimiento; Si aún necesita una alternativa ... podría usar SFiR, luego PS it y SFiR it. CSS3 no está listo hoy.
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;