如何用getJSON解析谷歌字体并实现分类下拉切换加载字体

嘿，我来帮你搞定这两个谷歌字体相关的问题，一步步来：

你可以通过谷歌字体的公开API获取字体数据，再用jQuery的getJSON方法请求并解析。具体实现如下：

首先，你需要去谷歌云平台申请一个API密钥（免费额度足够个人使用），然后用下面的代码请求数据并生成字体列表：

// 调用谷歌字体API，替换成你的API密钥
$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=你的API密钥', function(response) {
  // response.items 是包含所有字体信息的数组
  const fontListContainer = $('#font-list'); // 页面上预先准备好<ul id="font-list"></ul>

  // 遍历每个字体，生成带预览的列表项
  response.items.forEach(font => {
    const listItem = $('<li></li>')
      .text(font.family)
      .css('font-family', font.family); // 直接用字体本身渲染预览
    fontListContainer.append(listItem);
  });
});

这段代码会把所有谷歌字体的名称列出来，并且每个列表项都会用对应字体显示，直观展示字体样式。

既然你已经拉取了全部字体数据，接下来只需要先按分类整理数据，再绑定下拉框的切换事件即可。

第一步：整理字体分类数据 #

先把所有字体按category属性分组，方便后续按分类加载：

// 假设你已经把拉取到的所有字体存在了allFonts变量里
const fontCategoryMap = {};
allFonts.forEach(font => {
  const category = font.category;
  // 如果分类不存在，先创建空数组
  if (!fontCategoryMap[category]) {
    fontCategoryMap[category] = [];
  }
  fontCategoryMap[category].push(font.family);
});

// 给下拉框填充分类选项
const categorySelect = $('#font-category-select'); // 页面上的<select id="font-category-select"></select>
Object.keys(fontCategoryMap).forEach(category => {
  const option = $('<option></option>')
    .val(category)
    .text(category.charAt(0).toUpperCase() + category.slice(1)); // 首字母大写优化显示
  categorySelect.append(option);
});

第二步：实现change_font_group切换函数 #

推荐用谷歌官方的Web Font Loader来加载字体，它能提供加载状态回调，方便做交互反馈：

function change_font_group() {
  const selectedCategory = $(this).val();
  const targetFonts = fontCategoryMap[selectedCategory];

  // 用Web Font Loader加载字体（先确保页面引入了这个库：<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>）
  WebFont.load({
    google: {
      families: targetFonts
    },
    active: function() {
      // 字体加载完成后，可更新预览区域
      const previewArea = $('#font-preview');
      previewArea.empty();
      targetFonts.forEach(font => {
        const previewItem = $('<div></div>')
          .text(`${font} 这是一段预览文本`)
          .css('font-family', font);
        previewArea.append(previewItem);
      });
      console.log(`分类「${selectedCategory}」的字体已加载完成`);
    },
    inactive: function() {
      console.log(`分类「${selectedCategory}」的字体加载失败，请检查网络`);
    }
  });

  // 如果你不想用Web Font Loader，也可以动态创建link标签加载（无状态回调）
  // $('link[data-font-category]').remove(); // 先清空之前加载的字体
  // targetFonts.forEach(font => {
  //   const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(font)}`;
  //   const link = $('<link>')
  //     .attr('rel', 'stylesheet')
  //     .attr('href', fontUrl)
  //     .attr('data-font-category', selectedCategory);
  //   $('head').append(link);
  // });
}

// 给下拉框绑定change事件
$('#font-category-select').on('change', change_font_group);

这样当你切换下拉框的分类选项时，就会自动加载对应分类的所有字体，并且可以在加载完成后展示字体预览。

内容的提问来源于stack exchange，提问作者Device Developer