diff --git a/render/common.js b/render/common.js
index d61afa9..05cdb6c 100644
--- a/render/common.js
+++ b/render/common.js
@@ -1,7 +1,8 @@
 const getTheme = require('../common/theme.js');
 
 function render(items, theme = 'light') {
-  const {titleColor, backgroundColor, labelColor, valueColor} = getTheme(theme);
+  const { titleColor, backgroundColor, labelColor, valueColor } =
+    getTheme(theme);
   let textTags = '';
   for (let i = 0; i < items.length; i++) {
     items[i].id = `key_${i}`;
@@ -21,18 +22,18 @@ function render(items, theme = 'light') {
     textTags += renderText(items[i]);
   }
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="382" height="210" viewBox="0 0 382 210">
+  return `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='382' height='210' viewBox='0 0 382 210'>
   <defs>
-    <filter id="Card" x="0" y="0" width="382" height="210" filterUnits="userSpaceOnUse">
-      <feOffset dy="3" input="SourceAlpha"/>
-      <feGaussianBlur stdDeviation="3" result="blur"/>
-      <feFlood flood-opacity="0.161"/>
-      <feComposite operator="in" in2="blur"/>
-      <feComposite in="SourceGraphic"/>
+    <filter id='Card' x='0' y='0' width='382' height='210' filterUnits='userSpaceOnUse'>
+      <feOffset dy='3' input='SourceAlpha'/>
+      <feGaussianBlur stdDeviation='3' result='blur'/>
+      <feFlood flood-opacity='0.161'/>
+      <feComposite operator='in' in2='blur'/>
+      <feComposite in='SourceGraphic'/>
     </filter>
   </defs>
-  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Card)">
-    <rect id="Card-2" data-name="Card" width="364" height="192" rx="8" transform="translate(9 6)" fill="${backgroundColor}"/>
+  <g transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(#Card)'>
+    <rect id='Card-2' data-name='Card' width='364' height='192' rx='8' transform='translate(9 6)' fill='${backgroundColor}'/>
   </g>
   ${textTags}
 </svg>
@@ -43,12 +44,20 @@ function renderText(data) {
   let weight = '';
   if (data.type === 'title') {
     weight = ` font-weight="700" `;
-    return `<text id="${data.id}" x="50%" y="${data.translate_y}" dominant-baseline="middle" text-anchor="middle" fill="${data.color}" font-size="${data.font_size}" font-family="${data.font}" ${weight}>${data.text}</text>`;
+    return `<text id='${data.id}' x='50%' y='${data.translate_y}' dominant-baseline='middle' text-anchor='middle' fill='${data.color}' font-size='${data.font_size}' font-family='${data.font}' ${weight}>${data.text}</text>`;
   }
-  return `<text id="${data.id}" transform="translate(${data.translate_x} ${data.translate_y})" fill="${data.color}" font-size="${data.font_size}" font-family="${data.font}" ${weight}><tspan x="0" y="0">${data.text}</tspan></text>\n`;
+  return `<text id='${data.id}' transform='translate(${data.translate_x} ${data.translate_y})' fill='${data.color}' font-size='${data.font_size}' font-family='${data.font}' ${weight}><tspan x='0' y='0'>${data.text}</tspan></text>\n`;
 }
 
-function constructItem(translate_x, translate_y, text, type, font_size, color = '', font = 'SegoeUI, Segoe UI') {
+function constructItem(
+  translate_x,
+  translate_y,
+  text,
+  type,
+  font_size,
+  color = '',
+  font = 'SegoeUI, Segoe UI, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei'
+) {
   return {
     translate_x: translate_x,
     translate_y: translate_y,
@@ -56,10 +65,9 @@ function constructItem(translate_x, translate_y, text, type, font_size, color =
     type: type,
     font_size: font_size,
     color: color,
-    font: font
+    font: font,
   };
-
 }
 
 exports.render = render;
-exports.constructItem = constructItem;
\ No newline at end of file
+exports.constructItem = constructItem;