es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Fuente monoespaciada no se muestra correctamente en el servidor.

17 Jul, 2023 Programación

Estoy tratando de mostrar un conjunto de caracteres alfanuméricos, uno por línea, y quiero que se alineen correctamente, así que utilicé una fuente de “monospace”. Funciona bien cuando lo intento localmente (ejecutándolo desde Visual Studio, por ejemplo), pero cuando despliego la aplicación no funciona. Espero que no sea algún ajuste del navegador, porque no puedo pedirle al usuario que modifique su configuración de navegador.

Este es el CSS:

.monoSpace {
    font-family: monospace;
    font-size: .75em;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

Textarea utilizando este estilo:

<textarea id="taLabelIDs" name="taLabelIDs" class="monoSpace w-100" cols="40" rows="6"></textarea>

Así es como se ve al ejecutarlo localmente:

Versión local

Así es como se ve en el servidor:

En el servidor

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema probablemente está relacionado con la diferencia en las fuentes predeterminadas en la máquina local versus el servidor. Aunque la fuente monoespacio está ampliamente disponible, puede haber diferencias sutiles en las métricas de la fuente que hacen que el alineamiento se rompa.

    Una forma de asegurarse de que la fuente sea consistente en diferentes dispositivos es incluir la fuente como un recurso en su aplicación. Esto implicaría colocar el archivo de fuente en su proyecto y hacer referencia a él en su CSS utilizando la directiva @font-face.

    Aquí hay un ejemplo:

    @font-face {
   font-family: "MyMonoSpace";
   src: url("/fonts/MyMonoSpace.ttf") format("truetype");
}

.monoSpace {
   font-family: "MyMonoSpace", monospace;
   font-size: .75em;
   font-style: normal;
   font-variant: normal;
   font-weight: 400;
}

    En este ejemplo, el archivo de fuente MyMonoSpace.ttf se encuentra en una carpeta llamada “fonts” en la raíz de la aplicación. La directiva @font-face especifica el nombre de la familia de fuentes y hace referencia al archivo de fuente. El selector .monoSpace luego utiliza tanto la fuente personalizada como monospace como alternativa en caso de que la fuente personalizada no se pueda cargar.

    Al incluir la fuente con su aplicación, puede asegurarse de que se vea consistente en los diferentes dispositivos, sin depender de las fuentes predeterminadas instaladas en cada máquina.

Comments are closed.