Pregunta ¿Texto punteado en css?


¿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>

enter image description here

VIOLÍN

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 aquí)

enter image description 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)


32
2018-06-10 11:39


origen


Respuestas:


Para ser honesto, esta respuesta puede sonar graciosa o extraña, pero no estoy seguro si es posible con CSS SOLAMENTE (Como 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, solo tendrá un único .woff archivo que creo que es muy normal, ya que aumentará su http solicite por uno, y seguramente no será demasiado hinchado como usted piensa.

La lista de fuentes punteadas se puede encontrar en aquí. Convertir el ttf,utilizando Servicio Font Squirrel.

Asegúrate de tener permiso para hacerlo.


Manifestación Fuentes 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 admitir Crappy IE, solo el archivo que necesitarás es woff y eso es solo 23kb


18
2018-06-10 12:30



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 funcional esta .

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>


7
2017-12-24 23:46



Con algunos ajustes menores, podemos acercarnos bastante:

1) Cambiar font-family a mensajería nueva

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

3) Unidades modificadas para ems - (como @BDawg sugerido)

VIOLÍN

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>


3
2017-12-31 11:43



¿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 actualizar cada url('LINKTOFONT') en tu 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


2
2017-12-24 20:04



Cambiar el background-size 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)


2
2017-12-30 21:30



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 solo una   línea de puntos - no es la línea doble como lo es 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   nota que el 'm' char 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. Ahi esta text-fill-color en CSS y SVG. Sin embargo, está limitado a la implementación específica del navegador y a los prefijos de proveedor no estándar en CSS. Entonces hay stroke estilo. Tiene las mismas limitaciones en CSS (como la de fill) de ser no estándar, y también está limitado solo a width y 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 aumenta el Npx para eliminar virtualmente el text-fill. Pero, hay otros problemas con eso: (1) Las especificaciones dicen que funcionará como shadow es decir, sin estilo. Como en text-outline: 2px 2px #f00;. No hay solid / dotted / dashed opción de estilo. (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. Árbitro: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline 

  3. La única manera que queda afuera es usar un background patrón y luego hacerlo 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:

enter image description here

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 los dos ts en la ilustración de arriba marcada 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 el segundo t tiene los puntos alineados, el primero 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 el estrechamiento de las serifas y el de e, como está marcado en un 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 usas mono-space fuentes, entonces 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 el background La técnica 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. Combinando el patrón SVG con el background-image y manteniendo el background-size en por ciento puede funcionar hasta cierto punto en monospace fuentes en tamaños más grandes.

Renuncia: 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.

Retazo:

.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>


2
2017-12-31 16:15



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á


1
2017-12-27 12:10