Hogar › Tarifas › Fuentes web estándar. Fuentes seguras

Fuentes web estándar. Fuentes seguras

Las fuentes son una parte integral y muy importante del diseño de un sitio web, enfatizando su individualidad. El artículo hablará sobre cómo conectar fuentes estándar a una página web, también se les llama fuentes del sistema, y en el siguiente artículo veremos en detalle cómo elegir y conectar fuentes de Google Fonts a un sitio de WordPress.

Fuentes de sistema, estándar y seguras

Cualquier navegador muestra solo aquellas fuentes que están presentes en el sistema operativo de la computadora. Por eso se llaman de sistema y se instalan por defecto junto con el sistema operativo.

Y se denominan fuentes seguras porque es probable que se muestren en el navegador de la mayoría de los visitantes del sitio.

Pero el problema es que los diferentes sistemas operativos instalan diferentes conjuntos de fuentes. Puede ver los conjuntos de fuentes suministrados junto con el sistema operativo en las páginas oficiales de Windows y Mac OS. Y en Unix/Linux no existe ningún estándar.

Para que la página de Internet se muestre de acuerdo con la idea del diseñador, se instaló en CSS una propiedad de fuente llamada font-family

propiedad de familia de fuentes

La propiedad font-family son familias de fuentes agrupadas por ciertas características.

Familias genéricas:

serif: fuentes con serifas en los extremos;
sans-serif - fuentes sans-serif;
cursiva - fuentes en cursiva;
fantasía - fuentes decorativas;
monospace - fuente monospace (con letras del mismo ancho).

De esta manera, simplemente se seleccionan fuentes similares de diferentes sistemas operativos y se conectan a la página de Internet, separadas por comas.

Aquí hay un ejemplo, solo para la percepción visual. Volveremos a este ejemplo más adelante cuando consideremos la conexión directa de fuentes.

Simplemente sigue la lógica y todo quedará muy claro.

Cuerpo (familia de fuentes: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;)

Veamos lo que estaba escrito:

Sistema operativo Windows: Arial;
OC Mac OS - Helvética CY;
OC Unix/Linux - Nimbus Sans L;
Familia genérica: sans-serif.

Las llamadas fuentes seguras

Basado en el sistema operativo Windows, se ha compilado una lista de varias fuentes seguras.

arial
Arial Negro
Cómic Sans MS
Mensajero nuevo
Georgia
Impacto
Times New Roman
Trabuquete MS
Verdana

Todas estas fuentes están instaladas en Mac OS X, Windows y muchos usuarios de Unix/Linux que tienen instaladas las fuentes Core para el paquete Web.

Para otros usuarios, se proporciona una tabla de correspondencia. Contiene fuentes similares que pertenecen a una familia específica.

Tabla de correspondencia y pertenencia de tipografías a una familia concreta:

ventanas	sistema operativo mac	Unix/Linux	familia ancestral
Arial Negro	Helvética C.Y.	Nimbus Sans L	Sans-serif
arial	Helvética C.Y.	Nimbus Sans L	Sans-serif
Cómic Sans MS	Mónaco CY	* (vea abajo)	cursivo
Mensajero nuevo	* (vea abajo)	Nimbus Mono L	monoespacio
Georgia	* (vea abajo)	Libro escolar del siglo L	Serifa
Impacto	Carbón C.Y.	* (vea abajo)	Sans-serif
Times New Roman	Times CY	Nimbus Romano No9 L	Serifa
Trabuquete MS	Helvética C.Y.	* (vea abajo)	Sans-serif
Verdana	Ginebra C.Y.	DejaVu Sans	Sans-serif

* Al conectar fuentes, puede confiar en ellas con seguridad. La tabla admite caracteres cirílicos y el alfabeto ruso.
Tomé la tabla en sí en este artículo.

Conexión de fuentes del sistema al sitio.

Hay varias formas de conectar fuentes del sistema a su sitio. Además, puedes conectar diferentes fuentes a diferentes párrafos. Aplique diferentes fuentes a palabras y frases individuales. Ahora intentaré considerar todo esto.
Entonces, hagamos todo en orden.

Conexión de fuentes en un archivo CSS

Si necesitas conectarte fuente principal para todo el documento, sólo necesitas agregar el siguiente código a la hoja de estilo:

Cuerpo ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conecta la fuente a todo el documento */ font-size: 16px; /* establece adicionalmente el tamaño de fuente */ font -weight: 400 /* establece el peso de la fuente, o en lugar de 400, establece el valor en normal */ )

Asignar una fuente para los títulos H1, H2, H3, H4, H5, H6 (aquí es lo mismo, solo configuramos el valor en negrita para resaltar los encabezados):

H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conecta la fuente a los encabezados */ font-weight: 600; / * establezca el peso de la fuente, o en lugar de 600, establezca el valor en negrita */)

Asignamos una fuente solo a los párrafos:

P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conecta la fuente a los párrafos, se puede aplicar a listas li, bloques div, formularios y otros elementos */ font-weight : normal; /* establece el peso de la fuente, o en lugar de 600, establece el valor en negrita */ font-size: 16px /* establece adicionalmente el tamaño de la fuente para los párrafos */ )

A asignar una fuente solo a un párrafo específico, o bloque, primero debes asignar una clase a este bloque en el documento HTML

Aquí hay un párrafo con una fuente personalizada.

Y en la tabla CSS escribe el siguiente código:

Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conectamos la fuente a ciertos párrafos, se puede aplicar a listas li individuales, bloques div, formularios y otros elementos */ font-weight: normal; /* establece el peso de la fuente, o en lugar de 600, establece el valor en negrita */ font-size: 16px /* establece adicionalmente el tamaño de fuente para los párrafos */ )

Ahora, a cada etiqueta, un elemento html con una clase .font (llámelo como quiera), se le asignará una fuente Arial, con negrita normal (400) y un tamaño de 16 píxeles.
De manera similar, puede asignar diferentes fuentes a listas li, tablas, bloques div completos, palabras individuales o frases.

Conexión de fuentes en un documento HTML

Las fuentes se incluyen directamente en un documento HTML del mismo modo que un archivo CSS, la única diferencia está en la sintaxis. Puede incluir fuentes en el encabezado del documento, entre etiquetas (similar a un archivo CSS) o en línea: asigna propiedades directamente a las etiquetas html.

Incluir fuentes en el encabezado, entre etiquetas . Para hacer esto, agregue el siguiente código al documento html:

No me repetiré aquí. Todo es similar a la conexión en el archivo CSS.

Conexión de fuentes en línea, directamente a los elementos del sitio. Déjame darte algunos ejemplos:

Conectando la fuente al párrafo.

Aquí hay un párrafo con texto.

Resaltamos una palabra separada en negrita y asignamos una fuente separada de la principal

Aquí hay un párrafo con texto, y este palabra, que debe resaltarse en negrita

Aquí está el enlace

De manera similar, asignamos fuentes a cualquier etiqueta html.

Pero sigue siendo mejor y recomendado asignar estilos a los elementos a través de un archivo CSS. En primer lugar, necesita escribir estilos en CSS solo una vez y luego asignar solo la clase requerida en HTML. En segundo lugar, al escribir estilos en línea, se crea contenido duplicado. Estas propiedades y clases parecen estar indexadas por los motores de búsqueda, y escuché que el W3C quiere abolir el sistema en línea por completo. Aunque a veces es más fácil escribir estilos de esta forma.

Todo. Siga las actualizaciones del sitio, estoy preparando un artículo sobre cómo conectar fuentes originales y no estándar al sitio para que se muestren correctamente en todos los navegadores. También te presentaré varios buenos servicios donde puedes elegir fuentes personalizadas.

Al comenzar a crear un diseño, debe especificar específicamente en el CSS las fuentes utilizadas en la página. A menudo, en diferentes fuentes, el diseñador escribe no solo el texto principal de la página, sino también varios títulos, logotipos y monogramas:

Un buen diseñador, al igual que un buen maquetador, sabe que el navegador sólo puede utilizar aquellas fuentes que están instaladas en la computadora del usuario para mostrar una página. Es decir, las fuentes se pueden dividir en dos categorías:

Fuentes que se mostrarán sin problemas para la gran mayoría de usuarios.
Fuentes que un grupo bastante numeroso de usuarios no tiene.

Si el diseñador utilizó fuentes de la segunda categoría para crear, por ejemplo, un logotipo o títulos estáticos grandes, no puede dudar en utilizar la técnica. La desventaja de utilizar esta técnica es la inflexibilidad. Si hay cambios en el texto, tendrás que rehacer la imagen y cambiar el CSS (por ejemplo, si las dimensiones de la nueva imagen no coinciden con las antiguas).

Podemos decir que el peligro de utilizar una técnica depende directamente de la probabilidad de cambiar el texto. Por lo tanto, no puede utilizar, por ejemplo, el texto general de una página en fuentes no estándar. Un diseñador competente nunca haría esto. Y si el diseñador se encuentra con una fuente verde, un buen maquetador simplemente está obligado a corregir su error: en el diseño, reemplace esta fuente por la estándar más similar.

Pero, ¿cómo se pueden distinguir las fuentes del primer grupo del segundo? ¡Está claro que no puedes confiar en un conjunto de fuentes instaladas directamente en tu computadora! Vamos a resolverlo.

Fuentes estándar

Las fuentes estándar son un conjunto de fuentes que se instalan con el sistema operativo. Dado que los sistemas operativos son diferentes, su conjunto de fuentes es diferente. Puede encontrar una lista de fuentes estándar para diferentes versiones de Windows, por ejemplo, en el artículo Fuentes estándar de Windows y una lista de fuentes estándar de Mac OS en la página Fuentes incluidas con Mac OS. En cuanto a los sistemas operativos Unix/Linux, no tienen un único conjunto de fuentes. Muchos usuarios de Linux utilizan el conjunto de fuentes DejaVu, especialmente en Ubuntu, están instalados de forma predeterminada. Según las estadísticas de http://www.codestyle.org, muchos usuarios de Unix/Linux también tienen instalados conjuntos de fuentes URW, Free y otros. Según las mismas estadísticas, más del 60% de los usuarios de Unix/Linux tienen en sus ordenadores fuentes del Core Fonts for Web, que hasta 2002 estaban oficialmente disponibles para su descarga gratuita en el sitio web de Microsoft.

Para que la página se muestre como la concibió el diseñador, en cualquier sistema operativo, es posible especificar varias fuentes en la propiedad CSS, separadas por comas.

Esta propiedad especifica una lista priorizada de nombres de familias de fuentes y/o nombres de familias genéricos. Según la especificación CSS2, existen dos tipos de nombres de familias de fuentes:

El nombre de la familia de fuentes de su elección. Por ejemplo, "Times New Roman", "Arial" y otros. Los nombres de familias de fuentes que contienen espacios deben ir entre comillas. Si faltan comillas, se ignoran los caracteres de espacio antes y después del nombre de la fuente y cualquier secuencia de espacios dentro del nombre de la fuente se convierte en un solo espacio.
Familia genérica (común). La especificación define las siguientes familias genéricas:
- serif: fuentes con serifas en los extremos;
- sans-serif - fuentes sans-serif;
- cursiva: fuentes en cursiva;
- fantasía - fuentes decorativas;
- monospace - fuente monospace (con letras del mismo ancho).
Los apellidos de los clanes son palabras clave y no es necesario escribirlos entre comillas.

Así, para el diseño se toma una fuente estándar del sistema operativo Windows, se selecciona una similar para Mac OS y Unix/Linux, se especifica una familia de fuentes común y listo.

Pero no es tan simple. Profundicemos con más detalle.

Encontrar fuentes seguras para la web

En Internet, el concepto de fuentes web "seguras" se ha desarrollado históricamente. Una fuente segura es una fuente estándar para todos los sistemas operativos. Puesto que sólo se puede soñar con tal estado de cosas, entonces ¡No existen fuentes absolutamente seguras!

Algunas fuentes pueden considerarse seguras con algunas reservas.

La base para definir las fuentes "seguras" fueron las fuentes del sistema operativo Windows más común, que también se utilizan en otros sistemas operativos. Un ejemplo de este uso son las fuentes Core ya mencionadas para el paquete de fuentes web, que, según las estadísticas, han sido descargadas por muchos usuarios de Unix/Linux.

Este paquete incluye las siguientes fuentes: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Todos ellos admiten el alfabeto cirílico, que es importante para Runet.

El conjunto de fuentes que viene de serie con Mac OS X (este sistema operativo es el más utilizado entre los usuarios de Mac OS) incluye todas las fuentes del conjunto de fuentes principales para la Web.

Así, basándose en las fuentes de Windows utilizadas en otros sistemas operativos, se formó la siguiente lista de las llamadas fuentes web "seguras":

arial
Arial Negro
Cómic Sans MS
Mensajero nuevo
Georgia
Impacto
Times New Roman
Trabuquete MS
Verdana

La fuente Webdings contiene iconos y no se puede utilizar para contenido. Andale Mono no se usa mucho porque no es adecuado para la lectura de pantalla diaria y no todos los usuarios de Windows lo tienen.

Todos los usuarios de Windows, Mac OS X y la gran mayoría de los usuarios de Unix/Linux (es decir, aquellos que han instalado las fuentes Core para el paquete Web) tienen todas estas fuentes.

Pero ¿qué pasa con el resto? Después de todo, ¡lo que quieres es que el mayor número posible de usuarios vean el plan del diseñador!

Lea sobre esto en la segunda parte de la publicación.

Fuentes que se mostrarán sin problemas para la gran mayoría de usuarios.
Fuentes que un grupo bastante numeroso de usuarios no tiene.

Si el diseñador utilizó fuentes de la segunda categoría para crear, por ejemplo, un logotipo o títulos estáticos grandes, no puede dudar en utilizar la técnica de reemplazar el texto con una imagen. La desventaja de utilizar esta técnica es la inflexibilidad. Si hay cambios en el texto, tendrás que rehacer la imagen y cambiar el CSS (por ejemplo, si las dimensiones de la nueva imagen no coinciden con las antiguas).

Fuentes estándar

Para que la página se muestre como la concibió el diseñador en cualquier sistema operativo, es posible especificar varias fuentes en la propiedad CSS font-family, enumeradas separadas por comas.

El nombre de la familia de fuentes de su elección. Por ejemplo, "Times New Roman", "Arial" y otros. Los nombres de familias de fuentes que contienen espacios deben ir entre comillas. Si faltan comillas, se ignoran los caracteres de espacio antes y después del nombre de la fuente y cualquier secuencia de espacios dentro del nombre de la fuente se convierte en un solo espacio.
Familia genérica (común). La especificación define las siguientes familias genéricas:
- serif: fuentes con serifas en los extremos;
- sans-serif - fuentes sans-serif;
- cursiva - fuentes en cursiva;
- fantasía - fuentes decorativas;
- monospace - fuente monospace (con letras del mismo ancho).

Los apellidos de los clanes son palabras clave y no es necesario escribirlos entre comillas.

Así, para el diseño se toma una fuente estándar del sistema operativo Windows, se selecciona una similar para Mac OS y Unix/Linux, se especifica una familia de fuentes común y listo.

Pero no es tan simple. Profundicemos con más detalle.

Encontrar fuentes seguras para la web

En Internet, el concepto de fuentes web "seguras" se ha desarrollado históricamente. Una fuente segura es una fuente estándar para todos los sistemas operativos. Como sólo podemos soñar con tal situación, ¡no existen fuentes absolutamente seguras!

Algunas fuentes pueden considerarse seguras con algunas reservas.

Así, basándose en las fuentes de Windows utilizadas en otros sistemas operativos, se formó la siguiente lista de las llamadas fuentes web "seguras":

arial
Arial Negro
Cómic Sans MS
Mensajero nuevo
Georgia
Impacto
Times New Roman
Trabuquete MS
Verdana

Todos los usuarios de Windows, Mac OS X y la gran mayoría de los usuarios de Unix/Linux (es decir, aquellos que han instalado las fuentes Core para el paquete Web) tienen todas estas fuentes.

Pero ¿qué pasa con el resto? Después de todo, ¡lo que quieres es que el mayor número posible de usuarios vean el plan del diseñador!

Fuentes compatibles con cirílico

Una característica específica de RuNet es el problema con las codificaciones de páginas y la compatibilidad con el cirílico en las fuentes. Para evitar problemas con varias codificaciones de caracteres, a personas inteligentes se les ocurrió Unicode, que le permite combinar caracteres de varios idiomas en una sola fuente. Por lo tanto, para las páginas en ruso es necesario utilizar únicamente fuentes Unicode que admitan cirílico.

A continuación se muestra una tabla de correspondencias de fuentes.

ventanas	sistema operativo mac	Unix/Linux	familia ancestral
Arial Negro	Helvética C.Y.	Nimbus Sans L	Sans-serif
arial	Helvética C.Y.	Nimbus Sans L	Sans-serif
Cómic Sans MS	Mónaco CY	* (vea abajo)	cursivo
Mensajero nuevo	* (vea abajo)	Nimbus Mono L	monoespacio
Georgia	* (vea abajo)	Libro escolar del siglo L	Serifa
Impacto	Carbón C.Y.	* (vea abajo)	Sans-serif
Times New Roman	Times CY	Nimbus Romano No9 L	Serifa
Trabuquete MS	Helvética C.Y.	* (vea abajo)	Sans-serif
Verdana	Ginebra C.Y.	DejaVu Sans	Sans-serif

* en la columna opuesta a la fuente significa que el sistema operativo no tiene equivalentes cirílicos nativos de la fuente de Windows. Pero al mismo tiempo, existe una alta probabilidad de que esta fuente esté instalada directamente en el sistema operativo.

Por ejemplo, si el texto principal del diseño es Arial, buscamos esta fuente en la tabla y escribimos la línea correspondiente en CSS:

cuerpo (familia de fuentes: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;)

cuerpo (

fuente - familia: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif;

Esta entrada significa que si el usuario tiene la fuente Arial (y todos los usuarios de Windows y todos los usuarios de Mac OS X la tienen), la página se mostrará con esta fuente. Si el usuario no tiene esta fuente, entonces la página de un usuario de Mac OS 9 de habla rusa se mostrará exactamente en la fuente estándar del sistema Helvetica CY, y para un usuario de Unix/Linux se mostrará en la fuente Nimbus Sans L. , que está instalado en el 90% de los usuarios de Unix/Linux. Si el usuario de Unix/Linux se encuentra en el 10% que no tiene esta fuente, entonces la página se mostrará en la fuente serif configurada de forma predeterminada para ver páginas web.

Además del hecho de que la tabla tiene en cuenta las fuentes Unix/Linux, también hay un extraño icono CY después del habitual Helvetica. ¡Averigüemos qué es!

Antes del lanzamiento de Mac OS X, esta línea tenía el siguiente significado: para los usuarios de Windows, mostramos la página en Arial, para los usuarios de Mac OS 9, en la fuente estándar Helvetica, y para el resto, vemos la página en el sistema. fuente sans-serif, que está configurada por defecto en el navegador. Pero, de nuevo, ¡un matiz importante! ¡La fuente Helvetica estándar de Mac OS 9 no tiene cirílico! Para la página en ruso, esto significó lo siguiente: para los usuarios de Windows mostramos la página Arial, para los usuarios de Mac OS 9, en la fuente estándar Helvetica, que muestra información ilegible, y el resto ve la página con el sistema sans-serif. fuente configurada por defecto en el navegador.

Para mostrar correctamente este conjunto a los usuarios de Mac OS 9, en lugar de Helvetica no cirílico, tiene sentido especificar la misma fuente estándar de Mac OS 9 Helvetica CY, que contiene cirílico.

La lectura de las reglas ha cambiado desde el lanzamiento de Mac OS X. Ahora hay una fuente estándar común especificada para Windows/Mac OS X. Y si queremos que los usuarios de Mac OS 9 puedan ver la intención del diseñador, debemos incluir una fuente que contenga cirílico en la línea de fuente.

Entonces, si bien no existen fuentes seguras, existen familias de fuentes seguras. También se les llama pilas de fuentes CSS. Además de las fuentes estándar de Windows/Mac OS X, estas líneas también pueden incluir fuentes equivalentes del conjunto estándar de Mac OS 9 (que no contiene fuentes "seguras" de forma predeterminada) y fuentes comunes de Unix/Linux.

Cualquier diseñador de diseño, tarde o temprano, se encuentra con un momento en el que un diseñador utiliza una fuente en un diseño que no está incluida en la lista de fuentes "seguras"; ¡Pero esto todavía no es motivo para hacer sonar la alarma! Por ejemplo, los diseñadores suelen utilizar en sus diseños la fuente Tahoma, que no está incluida en esta lista. Una línea de fuentes correctamente construida abre la posibilidad de utilizar no sólo Tahoma, sino también otras fuentes. Cada vez más diseñadores aprovechan esta oportunidad y un maquetador competente debería saberlo.

A continuación se muestra una tabla adicional de fuentes que no están incluidas en la lista de fuentes "seguras", pero que se pueden utilizar en diseños.

ventanas	sistema operativo mac	familia ancestral
Consola Lúcida	Mónaco	monoespacio
Lúcida sin Unicode	lucida grande	Sans-serif
tahoma	Ginebra C.Y.	Sans-serif

¿Qué pasa si no existe el alfabeto cirílico?

Para los textos en inglés, las tablas anteriores tienen una apariencia ligeramente diferente.

ventanas	sistema operativo mac	Unix/Linux	familia ancestral
Arial Negro	Artilugio	Nimbus Sans L	Sans-serif
arial	helvética	Nimbus Sans L	Sans-serif
Cómic Sans MS	Mónaco	TSCu_Comic	cursivo
Mensajero nuevo	Mensajero	Nimbus Mono L	monoespacio
Georgia	* (vea abajo)	Libro escolar del siglo L	Serifa
Impacto	Carbón	Rekha	Sans-serif
Times New Roman	Veces	Nimbus Romano No9 L	Serifa
Trabuquete MS	helvética	Garuda	Sans-serif
Verdana	Ginebra	DejaVu Sans	Sans-serif

Para las fuentes Arial, Courier New y Times New Roman, al crear reglas, es mejor especificar primero la fuente Unix/Linux y luego la fuente Mac OS. Esto se debe a cierta corrupción del conjunto de fuentes principales de Linux X11.

Las fuentes que no están incluidas en la lista "seguras", pero que se pueden usar en diseños, se definen mejor mediante pilas de fuentes CSS basadas en esta tabla.

ventanas	sistema operativo mac	Unix/Linux	familia ancestral
Consola Lúcida	Mónaco	-	monoespacio
Lúcida sin Unicode	lucida grande	Garuda	Sans-serif
Linotipo Palatino	Palatino	Garuda**	Sans-serif
tahoma	Ginebra	kalimati	Sans-serif

Un guión en la columna Unix/Linux indica que los usuarios de estos sistemas operativos probablemente verán la fuente predeterminada en la página.

** En esta línea, tiene sentido colocar la fuente Garuda antes que Palatino (ver explicación arriba).

Conclusiones:

No existen fuentes absolutamente seguras. Las siguientes fuentes pueden considerarse condicionalmente seguras:
- arial
- Arial Negro
- Cómic Sans MS
- Mensajero nuevo
- Georgia
- Impacto
- Times New Roman
- Trabuquete MS
- Verdana
En el artículo se pueden encontrar pilas CSS seguras que tienen en cuenta la compatibilidad con el alfabeto cirílico en las fuentes.
Si la compatibilidad con el alfabeto cirílico no es importante en la página, utilizamos las pilas de CSS del artículo.

Una de las principales tareas del diseño web es elegir el software adecuado. fuentes estándar. Los servicios de incrustación de fuentes como Google Web Fonts o Typekit se crearon como alternativa con el objetivo de ofrecer algo nuevo.

Son muy fáciles de usar. Tomemos como ejemplo Google Web Fonts.

Elija la fuente Open Sans, Droid Serif o Lato. Escribe el código y pégalo en el elemento. documento HTML. ¡Estás listo para hacer referencia a él en CSS! Todo el proceso no duró más de 60 segundos. Y todo es completamente gratis.

¿Qué podría estar mal?

Es posible que algunas fuentes no estén disponibles para todos. Y esto significa que puede haber problemas. Está contento de haber elegido una fuente hermosa para el sitio, pero el visitante de la página web ve una escritura fea.

Esto no sucederá si implementa una opción de respaldo.

¿Qué importancia tiene utilizar fuentes web seguras?

Cada dispositivo tiene su propio conjunto de fuentes preinstaladas. Cuál depende del sistema operativo. El problema es que existen ligeras diferencias entre ellos.

¿Qué pasa con los sitios web? ¿Te gusta este? Es posible que la fuente que ve no sea la especificada originalmente para el sitio.

¿Qué significa? Digamos que el diseñador ha elegido alguna familia de fuentes pagas para el sitio. Si no los tiene instalados y no los proporciona un servicio web especial, entonces la fuente que ve es una de las opciones estándar. Por ejemplo, Times New Roman.

Por lo tanto, el texto en su pantalla puede verse simplemente terrible.

Pero fuentes estándar para el sitio disponible en todos los sistemas operativos. Esta es una pequeña colección disponible en Windows, Mac, Google, así como en Unix y Linux.

Con la ayuda de esta selección, los diseñadores, así como los propietarios de sitios web, pueden especificar qué fuente se debe utilizar como fuente de respaldo. Esto le brinda la posibilidad de controlar cómo se verá la página en diferentes dispositivos.

Como opción alternativa, el desarrollador selecciona una fuente que es muy similar a la original, y es ésta la que se mostrará al usuario.

Echemos un vistazo a una selección de los más populares. fuentes estándar HTML.

Las 15 mejores fuentes seguras para la web

arial

Considerado estándar en la mayoría de los casos. La fuente más común " sans serif"o fuentes sans serif ( que no tienen serifas al final de las letras). A menudo se utiliza en Windows para reemplazar otros caracteres.

helvética

Helvetica es un salvavidas para los diseñadores. Este fuente web estándar funciona casi siempre ( al menos como red de seguridad para otras fuentes).

Times New Roman

Cumple la misma función para las fuentes serif que Arial para las sans serif. Es uno de los más populares en Dispositivos Windows. Esta es una versión actualizada de la antigua fuente Times.

Veces

CSS fuente estándar El Times resulta familiar para la mayoría. Mucha gente lo recuerda en minúsculas en estrechas columnas de periódicos viejos. El tipo de impresión más común que se ha convertido en una tradición.

Mensajero nuevo

Similar a Times New Roman y utilizado como una variación de los viejos clásicos. También se considera una fuente monoespaciada. A diferencia de las fuentes serif y sans serif, todos sus caracteres tienen el mismo ancho.

Mensajero

Una fuente antigua de ancho fijo que se utiliza como alternativa en casi todos los dispositivos y sistemas operativos.

Verdana

Verdana puede considerarse legítimamente una verdadera fuente web ( verdadera fuente web) gracias a unas líneas sencillas que actúan como serifas, además de un gran tamaño. Sus letras son ligeramente alargadas, por lo que son fáciles de leer en la pantalla.

Georgia

La fuente web estándar Georgia es similar en forma y tamaño a la fuente Verdana. Sus caracteres son más grandes que otras fuentes del mismo tamaño. Pero es mejor no utilizarlo en combinación con otros. El mismo Times New Roman parece un enano en comparación.

Palatino

Palatino se remonta a la época del Renacimiento. Sin bromas. Esta es otra fuente grande que es perfecta para la web. Se utiliza comúnmente en titulares y anuncios.

Garamond

Otra pila antigua que data del siglo XVI en París. Su versión nueva y mejorada viene de serie en la mayoría de los dispositivos Windows. Posteriormente, esta fuente fue adoptada por otros sistemas operativos.

hombre de libros

hombre de libros ( o Bookman estilo antiguo) - uno de mejores fuentes estándar para encabezados. Su rasgo característico es la legibilidad incluso cuando se utiliza un tamaño pequeño.

Cómic Sans MS

Comic Sans MS es una alternativa divertida para las fuentes serif.

Trabuquete MS

Se trata de una fuente de temática medieval desarrollada originalmente por Microsoft a mediados de los noventa. Fue utilizado en Windows XP. Hoy en día se utiliza para componer el texto principal.

Arial Negro

Término análogo fuente estándar para el sitio Arial. Es cierto que es más grande, más grueso y más resistente. Sus proporciones son similares a las de la fuente Helvetica. Y esto es importante. ellos pueden Reemplace con éxito Helvetica sin tener que comprar una licencia.