¿Qué son las fuentes seguras para todos los navegadores cruzados de la plataforma web?

Question

¿Cómo hacer que cross browser, multiplataforma y todos los dispositivos sean compatibles con la pila de fuentes css?

Answer 1

No puede garantizar las fuentes que se utilizarán en un dispositivo móvil de la misma manera que puede garantizar qué fuentes están disponibles en una computadora normal.

Una apuesta segura es utilizar una familia de fuentes genéricas que puedan ser interpretadas por el navegador móvil para mostrarle la fuente relevante, p.

font-family: serif; /* (e.g., Times) */ 
font-family: sans-serif; /* (e.g., Helvetica) */ 
font-family: monospace; /* (e.g., Courier) */ 

Answer 2

La mejor solución es siempre suministrar una generic font family después de cualquier tipo de letra específicos:

font-family: "Foo Regular", "Bar Sans", sans-serif;

Answer 3

Tal vez este enlace le puede dar algunas ideas más:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

El uso de la fuente anteriormente las familias nunca me dieron problemas.

Answer 4

Tal vez esto le puede ayudar en su búsqueda: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite

Answer 5

en un sitio web móvil mejor que puede hacer es no establecer font-family en absoluto

Answer 6

Se señala en el 15.3 de la Recomendación W3C con respecto a la propiedad 'font-family' que debería tener fuentes de respaldo en una pila de fuentes para que el visitante de su sitio web tenga algunas opciones viables.

Las 'web seguros' pilas de fuentes que uso, que la mayoría cubren si no todos los dispositivos son los siguientes:

/* Web Safe Font Stacks (classes set in CSS) */ 
.head {font-family: Georgia,'Times New Roman',serif} 
.para {font-family: Verdana,Arial,sans-serif} 
.mono {font-family:'Courier New',Courier,monospace} 
.fant {font-family: Papyrus,Impact,fantasy} 
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive} 

Esto cubre los encabezados, párrafos, espacio sencillo para ejemplos de código, la fantasía para los artículos especiales, y cursiva para enfatizar Es posible que sólo necesita uno para los encabezados (H1 ~ H6) y otro para el cuerpo del texto:

body {font-family: Verdana,Arial,sans-serif} 
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif} 

Comprobar la siguiente cheatsheet de 2010, que incluye Linux y el IOS. Proporciona los porcentajes promedio de uso entre Windows, Mac, Linux e iOS: Web Safe Fonts

Answer 7

Olvídese de los stacks de fuentes de cross-platform multiplataforma, los ejemplos web generalmente solo se preocupan por Windows y OSX para el latín básico, fallan en los idiomas internacionales y Linux, y nuevos factores de forma. Linux nunca usó las mismas fuentes como Windows y OSX por razones de licencias, y las herramientas de diseño de fuentes han madurado lo suficiente como para encontrar mucha diversidad hoy (no es que crear una fuente de codificación grande sea fácil, pero solo muchos usuarios se preocupan por las fuentes que cubren su idioma particular).

La creación de fuentes se ha convertido en lo suficientemente barata como para las grandes corporaciones (incluidos los fabricantes de dispositivos móviles) a diferenciar al encargar nuevas fuentes para grandes versiones (nuevo dispositivo o versión principal del sistema operativo).

Cuando las encuestas de fuente seguían siendo populares, la familia de fuentes DejaVu tenía mucho alcance en Linux, quizás ya no sea así. DejaVu y Arial tienen diferentes métricas.

Simplemente use familias de fuentes CSS genéricas en su pila, evite cualquier derivado de helvética, no use un diseño que dependa de métricas de fuentes particulares y estará bien.

Answer 8

Algunos enlaces web "Fuentes de seguridad" de la parte superior Google:

https://www.cssfontstack.com/

http://web.mit.edu/jmorzins/www/fonts.html