rayado - ¿Texto punteado en css?

linea continua css

Question

¿Es posible hacer texto punteado con css?

Sé que lo más obvio sería usar una fuente punteada, pero si solo necesito usar texto punteado con moderación, hacer que el usuario descargue una fuente completa podría exagerar.

La idea que tuve fue superponer el texto con un pseudo elemento con un patrón de fondo de pequeños círculos transparentes con un fondo blanco.

Algo como esto:

<div class="dottedText">Some dotted text</div>

FIDDLE

CSS

.dottedText:after
{
    content: '''';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, transparent 50%),
    radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
    background-size:4px 4px;
}

Creo que podría estar cerca, pero la solución anterior no funcionará correctamente si cambias el tamaño de la fuente.

Estoy buscando una solución donde

1) Los puntos aumentarán de tamaño a medida que aumente el tamaño de fuente, y

2) preferiblemente, cada letra solo se debe mostrar con una sola línea de puntos, no con la línea doble tal como está ahora.

Editar: Cuando digo una sola línea de puntos, quiero decir que cada trazo debe estar compuesto por un solo punto. Por ejemplo: en la imagen de arriba, observe que el carácter ''m'' tiene 2 columnas de puntos ... bueno, yo preferiría solo uno.

Idealmente algo como esto (tomado de here ):

(No estoy seguro, pero posiblemente el degradado radial necesita ser ajustado para hacer esto)

Editar:

1) No me importa qué tipo de letra se usa, siempre que sea una fuente incorporada. (Incluso una fuente monoespacial está bien)

2) La solución no necesita funcionar en todos los navegadores. (Entonces, una solución webkit estará bien)

Answer 1

Respuesta corta:

No. No es posible.

tl; dr;

Estoy buscando una solución donde

1) Los puntos aumentarán de tamaño a medida que aumente el tamaño de fuente, y

2) preferiblemente, cada letra solo se debe mostrar con una sola línea de puntos, no con la línea doble tal como está ahora.

Editar: Cuando digo una sola línea de puntos, quiero decir que cada trazo debe estar compuesto por un solo punto. Por ejemplo: en la imagen de arriba, observe que el carácter ''m'' tiene 2 columnas de puntos ... bueno, yo preferiría solo uno.

Esto no se puede hacer sin una fuente personalizada .

Hay dos problemas inherentes con otras soluciones :

1. No hay text-fill-pattern en CSS. Ni siquiera en SVG. Hay text-fill-color tanto en CSS como en SVG. Sin embargo, está limitado a la implementación específica del navegador y a los prefijos de proveedor no estándar en CSS. Luego está el estilo de stroke . Tiene las mismas limitaciones en CSS (como el de fill ) que no es estándar, y también está limitado solo al width y al color . Aunque, SVG agrega stroke-linecap y stroke-dasharray , pero eso es todo lo que hay.

2. text-outline podría haber ayudado. Si funcionó como un border , entonces podríamos haber hecho un text-outline: Npx dotted red; . Y aumente el Npx para eliminar virtualmente el text-fill . Pero, hay otros problemas con eso: (1) Las especificaciones dicen que funcionará como una shadow es decir, sin estilo. Como en text-outline: 2px 2px #f00; . No hay solid / dotted / dashed opción de estilo solid / dotted / dashed . (2) W3C dice que la característica está en riesgo y se puede cortar de la especificación. (3) A partir de ahora, todavía no está implementado por ningún navegador. Ref: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline

3. La única forma que queda es utilizar un patrón de background y luego hacer que se clip al texto. Esto es mucho lo que ya has intentado en tu pregunta.

El problema con el último enfoque (fondo) es que las fuentes no son iguales. Ni siquiera similar. Los glifos son diferentes. Los ascendentes y descendientes son diferentes. Incluso los golpes en el mismo personaje son diferentes.

Esto se puede entender por esta ilustración:

Si observa los caracteres en la muestra anterior (fuente Times New Roman), mientras que las líneas verticales tienen casi el mismo ancho, las líneas horizontales (la barra horizontal en "e") son más estrechas. Además, las serifas también son de diferentes anchos y se estrechan hacia el final. Cuando se aplica un fondo con un patrón (cualquier mecanismo, imagen o SVG o radiales), no se alineará perfectamente con las líneas de fuente. Debido a espacios en blanco y fuentes proporcionales tienen diferentes distancias.

Observe las dos t en la ilustración de arriba marcadas en rojo. Aunque los glifos son iguales, pero dependiendo de la distancia desde el origen, el patrón de fondo no se puede alinear perfectamente. Por lo tanto, mientras que la segunda t tiene los puntos alineados, la primera t no. El patrón visible se desplaza parcialmente y, por lo tanto, el espacio en blanco es prominente. El mismo cambio de patrón ocurre aleatoriamente en todos los personajes.

Observe la conicidad de las serifas y la de e , como se indica en el círculo rojo en la ilustración de arriba. En el medio, la fuente es más gruesa y acomoda más puntos del patrón (algunos llenos, algunos parciales). En las gracias y las circonitas, se estrecha y el patrón no puede caber. Con curvas, los puntos en el patrón no se pueden doblar, después de todo es un patrón de cuadrícula.

No podemos reducir o aumentar los puntos individuales en el patrón para que quepan con las fuentes. Y no podemos cambiar el fondo a la alineación en todos los personajes. Cuando utiliza fuentes monoespaciales, el problema de distancia proporcional se mitiga en cierta medida, pero las curvas aún permanecen y el patrón no se puede alinear con eso.

Entonces, la técnica de background para esto es inherentemente defectuosa. La única solución es usar una fuente personalizada.

Sin embargo, si las aproximaciones son lo suficientemente buenas para usted, entonces su propia técnica de fondo radial funciona bien. Al menos aparte de Firefox, tu propia técnica funciona en otros navegadores.

También intentaré proporcionar una solución más similar. Combinar el patrón SVG con la background-image y mantener el background-size en porcentaje puede funcionar hasta cierto punto en fuentes monospace en tamaños más grandes.

Descargo de responsabilidad : este fragmento solo funcionará con navegadores basados ​​en webkit (Chrome / Safari), porque otros navegadores no parecen ser compatibles con SVG como background-image y también -webkit-background-clip: text; es, bueno, dependiente de webkit.

Fragmento :

.dotted {
    padding: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''  width=''4'' height=''4''><circle cx=''2'' cy=''2'' r=''2'' fill=''#f00'' stroke=''#fff'' stroke-width=''1''/></svg>");
    font-family: sans-serif;
    font-weight: 300;
    font-size: 32px; background-size: 0.9%;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px;  }
div:nth-of-type(3) { font-size: 80px;  }

<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>

Answer 2

¿No podrías usar el kit de webfont para esta fuente?

http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

Simplemente vinculará su CSS como lo haría para el tipo de fuente que le gustaría:

@font-face {
    font-family: ''bpdotsbold'';
    src: url(''BPdotsBold-webfont.eot'');
    src: url(''BPdotsBold-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''BPdotsBold-webfont.woff'') format(''woff''),
         url(''BPdotsBold-webfont.ttf'') format(''truetype''),
         url(''BPdotsBold-webfont.svg#bpdotsbold'') format(''svg'');
    font-weight: normal;
    font-style: normal;

}

Luego solo vincula cualquier elemento que quieras para usar esta fuente:

h1{font-family: ''bpdotsbold'', arial, helvetica;font-size:80px}

Solo asegúrese de cargar la ruta de los webfonts a su servidor y actualice cada url(''LINKTOFONT'') en su CSS.

Hubo muchas otras fuentes tipo Dot que font-squirrel tiene para ofrecer:

http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

Answer 3

Cambia el background-size para usar ems.

Por ejemplo:

background-size: 0.1em 0.1em;

NOTA: El cambio anterior muestra el tamaño de su primer ejemplo con la fuente, pero no produce su segundo ejemplo. Usaría SVG en línea en lugar de un enfoque de CSS puro si ese efecto exacto es una necesidad absoluta. (O el enfoque más obvio: cambiar a una fuente punteada)

Answer 4

Con algunos ajustes menores, podemos acercarnos bastante:

1) Cambiar la font-family a un servicio de mensajería nuevo

2) Agregue una text-shadow con un desplazamiento horizontal y vertical en el div

3) unidades modificadas a ems - (como @BDawg sugerido)

FIDDLE

div {
  font-size: 40px;
  font-family: courier new;
  position: relative;
  text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
  content: '''';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
  background-size: .1em .1em;
}
div + div {
  font-size: 60px;
}
div + div + div {
  font-size: 80px;
}
div + div + div + div {
  font-size: 100px;
}

<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>

Answer 5

Esta fuente es similar a lo que estás esperando

http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y

y tiene 4 extensiones [TTF, EOT, WOFF, SVG) que son compatibles con todos los navegadores

Espero que esto te ayudará

Answer 6

Incluso si se basa en los estilos en línea de SVG, esto es lo que vine con:

<svg xmlns="http://www.w3.org/2000/svg"
 width="1450px" height="300px" viewBox="0 0 800 300">

   <text x="2" y="155" 
    font-family="''Lucida Grande'', sans-serif" 
    font-size="222"
    stroke="red"
    stroke-width="3"
    stroke-linecap="round"
    stroke-dasharray="5,5"
    fill="none">
             Some dotted text
</text>

aunque por alguna razón el stroke-linecap no funciona ...

Si quieres jugar con un violín que funcione, revisa this .

EDIT-1 (moviendo svg-styles a CSS)

    svg{ 
        width:1450px;
        height:300;
        viewBox:0 0 1500 300;
      
    }
    text{
      font-family:''Lucida Grande'', sans-serif;
      font-size:152px;
      stroke:#000ece;
      stroke-width:3px;
      stroke-linecap:round;
      stroke-dasharray:1,1;
      fill:none;
    
    }

<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">

  <text  x="2" y="155" >
        

    Some dotted text

  </text></div>

Answer 7

Para ser sincero, esta respuesta puede sonar graciosa o extraña, pero no estoy seguro de si es posible con CSS ÚNICAMENTE (ya que no has etiquetado ningún otro idioma) , incluso si es, sería excesivo hacerlo, y por lo tanto tiene sentido usar una fuente punteada en lugar de escribir demasiadas líneas de CSS.

Incluso si descarta IE, tendrá solo un archivo .woff único que creo que es muy normal, ya que aumentará su pedido de http por uno, y seguramente no se sentirá demasiado hinchado como cree.

La lista de fuentes punteadas se puede encontrar here . Convierta el ttf , utilizando el servicio Font Squirrel .

Asegúrate de tener permiso para hacerlo.

Fuentes de Demo utilizadas: Dotline

^{(Los archivos están alojados en mi propio servidor, habilitado CORS porque la demostración falló en Firefox)}

Si no estás buscando apoyar IE malo, el único archivo que necesitarás es woff y eso es solo 23kb