Las Fuentes son una parte importante del dise o Visual de una p gina web. Determinan c mo se ve el texto y c mo lo percibe el usuario. A veces, un desarrollador puede necesitar usar una fuente espec fica que sea del sistema en el dispositivo del usuario. Las Fuentes del sistema proporcionan consistencia en la representaci n Visual del contenido entre diferentes dispositivos y sistemas operativos.
Sin embargo, para usar la fuente del sistema en una p gina web, debe realizar algunos ajustes adicionales. En esta gu a detallada, le diremos c mo hacer que la fuente sea la fuente del sistema en su p gina web.
para a adir una fuente.
para los elementos deseados en su p gina web. Puede configurarlo como la fuente principal o configurarlo para selectores espec ficos.
Paso 3: Compruebe que la fuente se muestra correctamente en su p gina web. Inicie la vista previa y verifique que la fuente se cargue y se muestre como lo dise .
Nota: Al usar Fuentes del sistema, tenga en cuenta que pueden diferir de un dispositivo a otro y de un sistema operativo a otro. Por lo tanto, para lograr una apariencia de fuente uniforme en todos los dispositivos y sistemas operativos, es posible que necesite agregar Fuentes alternativas o usar Fuentes web.
Ahora que sabe c mo hacer que la fuente sea una fuente del sistema en su p gina web, puede crear una vista Visual unificada para sus usuarios, independientemente del dispositivo o sistema operativo que est n utilizando.
- C mo usar la fuente del sistema como fuente principal en su sitio
- Obtenci n de la fuente del sistema
- Conexi n de la fuente del sistema
- Uso de la fuente del sistema en su sitio
C mo usar la fuente del sistema como fuente principal en su sitio
Si desea que su sitio tenga la misma fuente que los usuarios usan de forma predeterminada en sus dispositivos, puede usar la fuente del sistema como la fuente principal en su sitio. Esto mantendr un estilo uniforme y proporcionar una mejor visualizaci n del texto en todos los dispositivos.
, CSS- :
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
| En este ejemplo se muestran algunos de los nombres de fuente m s comunes del sistema para diferentes sistemas operativos. El navegador buscar autom ticamente las Fuentes disponibles en el sistema y usar la primera disponible de la lista. | |
|---|---|
| Tambi n puede agregar cualquier otra fuente del sistema a la lista de valores de la propiedad font-family para tener en cuenta los diferentes sistemas operativos y la configuraci n de Fuentes de los usuarios. | El uso de la fuente del sistema permitir que su sitio se adapte a las preferencias de los usuarios, mejore la legibilidad y cree un estilo uniforme que se ajuste visualmente a otras aplicaciones y sitios web en los dispositivos del usuario. |
| Obtenci n de la fuente del sistema | Descripci n |
| 1. Abrir archivo de fuente | Para empezar, simplemente puede abrir el archivo de fuente para asegurarse de que est en el directorio correcto y tiene el nombre correcto. |
2. Uso de la l nea de comandos
En algunos casos, puede utilizar el s mbolo del sistema para obtener informaci n sobre las Fuentes instaladas en el equipo. Por ejemplo, con el comando
fc-list
- puede Mostrar una lista de todas las Fuentes instaladas.
- 3. Uso de interfaces gr ficas
- Tambi n hay interfaces gr ficas especiales con las que puede aprender informaci n detallada sobre las Fuentes. Por ejemplo, en Windows, puede usar La aplicaci n ver Fuentes.
- Despu s de recibir la fuente del sistema, puede comenzar a configurarla e instalarla como fuente del sistema. Para hacer esto, debe familiarizarse con la documentaci n del sistema operativo y realizar los pasos apropiados.
Conexi n de la fuente del sistema
Para convertir una fuente en una fuente del sistema en su sitio web, necesitar algunos pasos.
Seleccione la fuente del sistema que desea utilizar. Puede ser cualquier fuente instalada en la computadora del usuario.
Aseg rese de tener acceso a esta fuente. Si la fuente no est instalada en su computadora, puede pedirle al usuario que la instale o usar variaciones de Fuentes similares.
Cree un archivo de estilo CSS o abra un archivo de estilo existente que est utilizando en su sitio.
En el archivo de estilos, defina una regla para los elementos a los que desea aplicar la fuente. Por ejemplo, si desea utilizar la fuente del sistema para todos los p rrafos de su sitio, puede usar la siguiente regla:
p {
Reemplace "Nombre de la fuente seleccionada" con el nombre de la fuente del sistema que seleccion .
Tambi n puede especificar una lista de Fuentes para usar en orden de prioridad. Por ejemplo:
La ltima fuente de la lista debe ser la fuente gen rica que se usar si todas las Fuentes anteriores no est n disponibles.
Uso de la fuente del sistema en su sitio
El uso de un sistema de fuente en su sitio puede ser una forma til de crear un estilo Visual uniforme y consistente para su contenido. Cuando usa la fuente del sistema, permite que su navegador web elija la fuente que m s se ajuste a la configuraci n del sistema operativo del usuario.
p {
font-family: "system-ui";