5
Estoy cargando el nombre de Google font-families en una lista de selección. Cuando el usuario selecciona cualquier familia de fuentes de la lista, entonces la cargo dinámicamente. Mi código:Cómo mostrar la vista previa de fuente de Google
$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=...", {}, function (data) {
$.each(data.items, function (index, value) {
$('#fc').append($("<option></option>").attr("value", value.family)
.text(value.family));
});
$('#fc').selectmenu({ select: function() {
$('body').append("<link rel='stylesheet' id='colorbox-css' href='http://fonts.googleapis.com/css?family=" + escape($(this).selectmenu("value")) + "' type='text/css' media='all' />");
}
});
});
Ahora quiero mostrar la vista previa de la fuente al usuario antes de cargar esa fuente.
¿Esto es posible?
Gracias, pero de esta manera, cada vez que el usuario selecciona la fuente, la fuente se carga y si después de ver el usuario de la vista previa no quiere usar esa fuente, significa que hemos cargado esa fuente innecesariamente. ¿No es esto un enfoque costoso? –
La conclusión es que no puede mostrar una fuente sin cargarla, y solo se cargará mientras dure la vida de la página. Una vez que el usuario ha elegido una fuente, solo almacena la que eligieron y solo cargará esa en el futuro cuando vuelva a mostrar el contenido. Las únicas alternativas serían a) cargar la fuente en un servidor en alguna parte, renderizar una imagen con ella, y luego enviar esa imagen al usuario. La carga todavía ocurre pero no para el usuario. b) renderizar imágenes que representan todas las fuentes posibles. Sería difícil mantener esto mientras se agregan nuevos, pero más rápido cuando se usa que la opción a – Basic