如何为json文件中包含的内容添加字体颜色？

为JSON文件中包含的内容添加字体颜色，需要在前端开发中使用CSS样式来实现。JSON文件本身只包含数据，不包含样式信息。以下是一种实现方法：

在HTML文件中引入CSS样式文件：

<link rel="stylesheet" type="text/css" href="styles.css">

在CSS样式文件中定义字体颜色：

.json-key {
  color: blue;
}

.json-value {
  color: green;
}

在JavaScript中加载JSON文件，并将数据渲染到HTML页面中：

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const jsonContainer = document.getElementById('json-container');
    jsonContainer.innerHTML = renderJson(data);
  });

function renderJson(data) {
  if (typeof data === 'object') {
    let result = '';
    if (Array.isArray(data)) {
      result += '[<br>';
      for (let i = 0; i < data.length; i++) {
        result += renderJson(data[i]);
        if (i < data.length - 1) {
          result += ',<br>';
        }
      }
      result += '<br>]';
    } else {
      result += '{<br>';
      for (let key in data) {
        result += `<span class="json-key">${key}:</span> ${renderJson(data[key])},<br>`;
      }
      result += '<br>}';
    }
    return result;
  } else {
    return `<span class="json-value">${data}</span>`;
  }
}