如何顯示Google字體預覽

我正在將Google字體系列名稱加載到選擇列表中。當用戶從列表中選擇任何字體系列時，我會動態加載該字體。我的代碼：如何顯示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' />"); 
    } 
    }); 
});

現在我想在加載該字體之前向用戶顯示字體的預覽。

這可能嗎？

來源

2012-07-20 Tom Rider

您可以將字體加載到頁面中作爲described here。然後，只需在示例文本中添加一個div，並根據從下拉列表中選擇的字體進行設置。

具體看最後一節上添加事件處理 - 您可以使用JS來檢測時的字體（S）已完成加載和應用它們在適當

來源

2012-07-20 13:27:34 Basic

謝謝，但按照這種方式，每次用戶選擇字體時，字體都會加載，如果看到預覽用戶不想使用該字體，那意味着我們不必要地加載該字體。這是一個昂貴的方法嗎？ – 2012-07-20 14:03:36

底線是，如果不加載它就不能顯示字體 - 而且它只會在頁面生存期內加載。一旦用戶選擇了一種字體，您只需存儲他們選擇的字體，並且將來只會在重新顯示內容時加載該字體。唯一的選擇是a）將字體加載到某個服務器上，用它渲染圖像，然後將該圖像發送給用戶。負載仍然發生，但不是用戶。 b）預先渲染代表所有可能字體的圖像。這將是一個痛苦，因爲新的添加，但使用比選項a時更快 – Basic 2012-07-20 14:19:10