CSS para todas las plataformas

[Manolo]

Hola a todos :)
Quisiera formular una pregunta, pero primero os pondré en situación. Imaginad que tenemos que hacer una página que se vea igual (hablando sobre CSS) en un Windows que en un Mac que en un iPhone... Al definir la fuente para el cuerpo, escribiríamos:

Código: Seleccionar todo

body {
font-family: Trebuchet MS;
}

Pero hay un problema, la fuente Trebuchet MS (por poner un ejemplo) puede no estar instalada en el iPhone o en el Mac. ¿Cómo haríamos para que en todas las plataformas se viera esta fuente? ¿Hay algún 'código universal' para que se vea igual?
Gracias a todos.

[Alejandro]

Hola Quitz, si no está instalada no sale... lo que se puede hacer es especificar más fuentes... si una no está pasa a la siguiente, algo así:

Código: Seleccionar todo

body {
font-family: Trebuchet MS, Arial, otra fuente, otra fuente;
}

[elQuique]

W3C o World Wide Web Consortium son quienes dictan las pautas y estándares de la Web, por tanto es interesante comenzar a aprender HTML y CSS desde esas paginas ya que de esa forma eliminamos las mañas y cosas mal aprendidas.

Para que el contenido sea Accesible debe respetar Estándares y esa fuente no es estándar ya que no existe en todas las plataformas.

Igualmente la solución para mitigar el problema es la que comenta spamloco.

Igualmente ya que mencionas iPhone, es entendible que no es lo mismo la pantalla de un iPhone que la de un PC o NoteBook, por tanto también es cierto que los contenidos no tienen porque verse igual en todos los dispositivos, se tienen que ver pero no ser pixel a pixel idénticos.

Recuerda que cualquier usuario puede ir a herramientas configuración y elegir times new roman tamaño 14 para ver toda la internet, y listo voló tu teoría y diseño :)

[Manolo]

elQuique, a lo que me refiero es que, si una fuente tiene que ser de 12 px y de color negro, que en todas las plataformas se vea con 12 px y de color negro. Muchas gracias a los dos por las respuestas. Por cierto: ¿cómo se puede saber si una fuente es estándar o no?

[elQuique]

Si a lo que comenta spamloco le agregas:

Código: Seleccionar todo

font-size: 12px;
color: #000;

va a ser negro de 12px, a menos que yo configure mi navegador para usar el tamaño y fuente que yo quiera.

Igualmente no se debe usar px se debe usar em u otras medidas estándares independiente del dispositivo, configuración, o navegador que utilicemos.

Donde aprender todo eso ??, quien marca los estándares ? pues donde dije :s en W3C => http://www.w3c.org/

W3C o World Wide Web Consortium son quienes dictan las pautas y estándares de la Web, por tanto es interesante comenzar a aprender HTML y CSS desde esas paginas ya que de esa forma eliminamos las mañas y cosas mal aprendidas.

[JMiur]

Lo que dicen SpamLoco y elQuique es así. en este sitio, hay una lista de fuentes llamémoslas "seguras": http://vloox.com/92/fuentes-web-seguras/

En cuanto al tamaño, yo recomentaria usar pixeles y no puntos.

También hay que tener cuidado con los colores ya que hay diferencias importantes y es por eso que se definen una serie de colores como "seguros": http://es.html.net/tutorials/html/lesso ... rchart.asp

El tema de los móviles es nuevo (por lo menos para mi) ¡Ya tengo bastante con los sistemas operativos y con los distintos navegadores!

[Nico]

Muy bueno el link de las fuentes seguras. Tengo una pregunta: influye en algo especificar "sans-serif"? O de todas formas, igual es lo mismo y se utilizará una fuente genérica?

[JMiur]

Es que, justamente, esa es la forma de indicar una fuente generica: monospace serif sans-serif cursive fantasy

Indicarla es "obligatorio" porque es el tipo que se usará en caso de no disponerse de ninguna de las otras indicadas.

[Manolo]

hmmm... eso de las fuentes genéricas parece interesante. ¿Quiere eso decir que si en un PC no está instalada la fuente 'Arial', por ejemplo, podemos usar 'sans-serif' y se seguiría viendo bien?

[JMiur]

Algo así. Si no está instalada la fuente 'Arial' y pones 'sans-serif', el navegador buscará la fuente que más se aproxime.

Difícil que no esté Arial pero ... sólo es un ejemplo, claro :D

[Manolo]

Claro, Arial es solo un ejemplo. Sé que es una fuente demasiado común, pero si estuviéramos hablando de fuentes más raras como Franklin Gothic (una fuente cualquiera que he visto un mi carpeta de fuentes) puede que los usuarios de Mac o Linux no viesen correctamente la página.
Gracias por la respuesta, JMiur :D

[elQuique]

En realidad no hay que usar fuentes raras, hay que usar las estandares. Es un tema de Accesibilidad, y en algunos casos Usabilidad ya que quedan ilegibles, pero todo eso esta bien explicado en la pagina de W3C.

[Manolo]

Gracias elQuique por la aclaración, de todas formas no uso fuentes raras. Solo era un ejemplo :D
Muy bién, ya he aprendido unas cosillas con este post. Creo que todas mis dudas ya están despejadas, muchas gracias a todos los que habéis respondido y me habéis contestado mi pregunta. Este post se puede dar por cerrado

[elQuique]

De nada, y cualquier cosa pega el grito.

[tomasdev]

Esta bien, se que no corresponde porque el titulo dice CSS... pero deberias probar sIFR, y usas la fuente que quieras. Solo apto para diseniadores que saben lo que hacen.

[pablocasuriaga]

Muy interesante el post, y como dice elQuique todo esta en la W3C, pero me gustaria compartir con todos un interesante blog que conoci hace poco y la verdad que tiene articulos realmente interesantes CSS Blog espero que les sirva de algo.

Saludos

PD: Por si alguno se le ocurre preguntar, el blog no es mio :D ni de ningun conocido

[Manolo]

Gracias por el aporte Pablo, la verdad es que es interesante. He estado mirando, creo que me bajaré los apuntes rápidos de CSS para tenerlos a mano :)