Share
FOUT (un Flash de texto sin estilo) es lo que verás a menudo en ese breve momento antes de que un navegador haya tenido la oportunidad de cargar y aplicar fuentes web. Typekit y Google Web Fonts nos ofrecen una forma de evitar este inconveniente: aquí hay un consejo rápido para explicar exactamente cómo.
Se lo agradezco a Dan por esto, después de que su reciente artículo me recordó al cargador de WebFont. Es tan útil que pensé que valía la pena tirar en una punta rápida.
Qué acrónimo apropiado (en holandés significa error). En cualquier caso, cuando utiliza fuentes web, deben cargarse en su navegador como activos (como imágenes y scripts) que pueden demorar un momento. En esta situación, su navegador verá la pila de fuentes ...
body font-family: 'Oswald', Arial, sans-serif;
... para determinar qué fuente se debe mostrar mientras la fuente web (Oswald en este ejemplo) está haciendo su viaje. Una vez que la fuente web esté disponible, es probable que haya un 'flash' cuando la fuente alternativa desaparezca y la fuente deseada ocupe el lugar que le corresponde. No es ideal.
Google y Typekit integraron el script webfontloader, y está disponible de forma predeterminada con sus dos servicios..
Agrega nombres de clase a la elemento para reflejar el estado de cualquier fuente web que se está cargando. Mientras se lleva a cabo la carga, esto se aplica:
Más específicamente, las clases se agregan para cada fuente en la tubería (Droid Serif Normal 400 por ejemplo):
Una vez que se completa el proceso, estas clases se actualizan:
O en el caso de un problema al cargar los activos:
Estas clases nos brindan una gran flexibilidad para determinar lo que un usuario experimenta en un momento dado del proceso de representación de fuentes web. Vamos a construir un ejemplo para dejar las cosas perfectamente claras..
Bueno, me salté un paso, asumo que tienes un documento html con el que trabajar. Descargue los archivos de origen y encontrará una carpeta llamada "demo-starting-block". Abre el index.html dentro de él y listo..
Dirígete a Google Web Fonts y selecciona una o dos fuentes para usar en tu proyecto.
Una vez que haya pulsado "Agregar a la colección", diríjase hacia la parte inferior de la pantalla y presione "Usar" donde verá un resumen de su colección hasta el momento..
Mientras que normalmente puede optar por enlazar directamente al archivo css almacenado en los gigantescos servidores de Google, presione la pestaña de JavaScript y copie el fragmento que se le da..
Google sugiere que pegue este fragmento como el primer elemento después de la apertura Etiqueta - y con buena razón. Es importante que esta secuencia de comandos tenga permiso para aplicar los nombres de clase (de los que hablamos antes) lo antes posible para combatir FOUT. Si has activado este JavaScript después de todo lo demás en la página, la fuente alternativa tendrá una oportunidad de levantar su cabeza fea ...
Aquí está mi fragmento, seguro donde pertenece:
Apliquemos nuestra fuente Boogaloo a todo lo que hay en la página (no voy a buscar puntos de estilo aquí). Abre css / styles.css y comienza todo con:
body font-family: 'Boogaloo', cursiva;
Google ha manejado todo el @ font-face jiggery-pokery real del lado del servidor, solo tenemos que utilizar el valor como se indica.
Bien, en este punto verás el efecto FOUT que he estado golpeando tanto (aunque hay que reconocerlo * muy * brevemente). Si desea verlo más claramente, intente agregar cientos de fuentes a su colección, eso debería ralentizar las cosas ...
Accentsconagua
wf- * Hay todo tipo de cosas que podría hacer con el contenido de su página web, para reflejar específicamente el estado de carga de la fuente. Vamos a usar un pseudo-elemento para informar a los usuarios lo que está pasando.
Continuando en nuestros styles.css, agregue un: después de un pseudo-elemento a nuestro HTML mientras tiene una clase wf-loading, así:
.wf-loading: después de / * por primera vez, necesitamos definir algunos contenidos * / content: "cargando fuentes ..."; / * ahora vamos a darle algunas dimensiones, un color de fondo y colóquelo en la página * / ancho: 100%; altura: 100%; posición: fijo arriba: 0; izquierda: 0; / * bien, entonces, ¿cómo queremos que se vea nuestra etiqueta? * / color: # 135040; tamaño de letra: 1.5em; font-weight: negrita; línea de altura: 20em; text-align: center;
Básicamente hemos cubierto toda la página con una gran etiqueta, los comentarios en el CSS deberían aclarar lo que está sucediendo. Aquí hay una captura de pantalla de lo que puedes ver mientras se carga la fuente:
Por supuesto, una vez que la fuente ha terminado de cargarse, las clases de carga se eliminan y se reemplazan con otros estados. los :después El pseudo-elemento deja de ser, revelando la página con su fuente web aplicada. No FOUT!
El efecto que acabamos de lograr hace su trabajo a la perfección, pero la etiqueta desaparece una vez que se cargan las fuentes, revelando abruptamente el contenido debajo. Podemos mejorar eso, seguramente?
De manera frustrante, las transiciones en el contenido generado aún son poco compatibles, por lo que no podemos confiar en ningún truco allí. Lo que podemos hacer es ocultar todo el contenido de la página, hacer la transición una vez que el -cargado Se han aplicado clases..
Prueba esto. Deshazte de todos los estilos que acabamos de crear, colocando esto en la parte superior de tu archivo css:
.wf-loading * / * lo primero es lo primero, debemos ocultar todo, pero tenga en cuenta que esto solo tendrá efecto una vez que el script de carga haya tenido efecto. Aquí estamos escondiendo todo el contenido dentro de la una vez que tenga la clase "wf-loading" * / opacity: 0; body font-family: 'Boogaloo', cursiva;
Este pequeño nugget se va a esconder (reduciendo la opacidad a 0) cada elemento dentro html.wf-loading. Es la primera regla, ocultando todo antes de que tenga lugar FOUT..
Con el contenido oculto, podemos aplicar un fondo a nuestro elemento html.
.wf-loading / * aquí hay una imagen de fondo (a más de 723 bytes) para indicar que algo está sucediendo * / background: url ('… /images/ajax-loader.gif') centro central sin repetición; / * sólo para asegurarse de que el el elemento comparte las mismas dimensiones que la ventana del navegador cuando se carga (y no la página potencialmente alargada) * / altura: 100%; desbordamiento: oculto; Hemos utilizado un loader.gif generado por una de las muchas herramientas en línea disponibles. Obviamente, cualquiera que sea el fondo que elija, debe ser ligero. No tiene sentido intentar cargar un archivo de fuente de 20Kb mostrando un gráfico de 4Mb ...
Ahora, si cargamos nuestra página, todo el contenido está oculto, aparte del html.wf-loading Con su cargador de fondo GIF. Cuando la fuente se cargue, ese gif desaparecerá..
Al elemento html ahora se le han asignado otras clases, así que usemos esas para recuperar el contenido invisible:
.wf-active *, .wf-inactive * / * agregue algunos efectos de transición para reintroducir el contenido gradualmente una vez que se carguen las fuentes * / -webkit-transition: la opacidad se reduce fácilmente; -moz-transición: la opacidad se alivia; -o-transición: la opacidad se alivia; transición: la opacidad es fácil;
Independientemente de si la fuente se cargó exitosamente o no, tendremos que ver nuestro contenido nuevamente. wf-cargando libera su comprensión de la opacidad cero de todos los elementos de la página, por lo que los adaptamos lentamente. Una vez más, para reducir la velocidad, intente agregar un montón de fuentes (o juegue con los nombres de clase en el inspector de elementos de su navegador). Las fuentes son también se almacena, por lo que cada vez que lo pruebes es posible que deba vaciar la memoria caché del navegador.
Sencillo, pero efectivo. Mi tipo favorito de propina. Y las posibilidades son infinitas, ¿cómo sugerirías usar el wf- * clases?
Por último, pero no menos importante, no pude resistir a este precargador de Kontramax en dribbble. Es un poco pesado para nuestros propósitos, pero ¿qué diablos?!
