diff --git a/edit.txt b/edit.txt
new file mode 100644
index 0000000..7888925
--- /dev/null
+++ b/edit.txt
@@ -0,0 +1 @@
+Header部分修改结构，增加按钮和下拉菜单，保留原有按钮。
\ No newline at end of file
diff --git a/src-tauri/src/inject/custom.css b/src-tauri/src/inject/custom.css
new file mode 100644
index 0000000..4ba7d96
--- /dev/null
+++ b/src-tauri/src/inject/custom.css
@@ -0,0 +1,132 @@
+.readerControls {
+    left: unset !important;
+    margin-left: unset !important;
+    right: 16px !important;
+    transition: opacity .3s ease-in-out;
+  }
+  
+  div.app_content div.readerTopBar {
+    height: 32px;
+    left:0;
+    right:0;
+    width: unset;
+    max-width: unset;
+    transition: opacity .3s ease-in-out;
+  }
+  
+  div.readerContent div.app_content {
+    max-width: ${getLS(contentWidthKey) || 1000}px !important; 
+  }
+  
+  .wr_whiteTheme .readerContent div.app_content {
+    background-color: rgb(253,246,227) !important;
+  }
+  
+  .readerBottomBar {
+    display: none !important;
+  }
+  
+  .drag-bar {
+    position: fixed;
+    height: 100%;
+    width: 8px;
+    top: 0;
+    bottom: 0;
+  }
+  
+  .right-bar {
+    cursor: col-resize;
+    left: 50%;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+    background: linear-gradient(0.25turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+    opacity: 0;
+  }
+  
+  .right-bar.active {
+    opacity: 1;
+  }
+  
+  .left-bar {
+    right: 50%;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+    background: linear-gradient(0.75turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+    opacity: 0;
+  }
+  
+  .left-bar.active {
+    opacity: 1;
+  }
+  
+  .darg-indicator {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    background: linear-gradient(0.25turn, transparent, #295BE9 20%, #295BE9 80%, transparent);
+    height: 2px;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+    opacity: 0;
+    display: none;
+  }
+  
+  .darg-indicator.active {
+    opacity: 1;
+    display: block;
+  }
+  
+  .ind-num {
+    font-size: 30px;
+    color: #295BE9;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 50%;
+    width: 500px;
+    text-align: center;
+    margin: auto auto 0;
+    text-shadow: 5px 3px 6px #576b95;
+    background: linear-gradient(45deg, transparent,#fff 50%, #fff 50%, transparent);
+    margin-bottom: 2px;
+    z-index: 10;
+    opacity: 0;
+    display: none;
+  }
+  
+  .ind-num.active {
+    opacity: 1;
+    display: block;
+  }
+  
+  .navBar_link.navBar_link_ChangeFont {
+    border: none;
+    cursor: pointer;
+  }
+  
+  .navBar_font_menu {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .navBar-subMenu {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    overflow: auto;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  .navBar-subMenu span {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  .navBar-subMenu span:hover {background-color: #ddd;}
+  
+  .show {display: block;}
+  
\ No newline at end of file
diff --git a/src-tauri/src/inject/custom.js b/src-tauri/src/inject/custom.js
index 68632a8..c8edd18 100644
--- a/src-tauri/src/inject/custom.js
+++ b/src-tauri/src/inject/custom.js
@@ -7,118 +7,250 @@
 
 const contentWidthKey = 'cWidthz';
 
-function applyCss() {
-  const css = `
-    * {
-      font-family: "LXGW WenKai Screen", LXGWWenKai, TsangerJinKai05, sans-serif !important;
-    }
-    
-    .readerControls {
-      left: unset !important;
-      margin-left: unset !important;
-      right: 16px !important;
-      transition: opacity .3s ease-in-out;
-    }
+const css = `
+.readerControls {
+  left: unset !important;
+  margin-left: unset !important;
+  right: 16px !important;
+  transition: opacity .3s ease-in-out;
+}
 
-    div.app_content div.readerTopBar {
-      height: 32px;
-      left:0;
-      right:0;
-      width: unset;
-      max-width: unset;
-      transition: opacity .3s ease-in-out;
-    }
+div.app_content div.readerTopBar {
+  height: 32px;
+  left:0;
+  right:0;
+  width: unset;
+  max-width: unset;
+  transition: opacity .3s ease-in-out;
+}
 
-    div.readerContent div.app_content {
-      max-width: ${getLS(contentWidthKey) || 1000}px !important; 
-    }
+div.readerContent div.app_content {
+  max-width: ${getLS(contentWidthKey) || 1000}px !important; 
+}
 
-    .wr_whiteTheme .readerContent div.app_content {
-      background-color: rgb(253,246,227) !important;
-    }
+.wr_whiteTheme .readerContent div.app_content {
+  background-color: rgb(253,246,227) !important;
+}
 
-    .readerBottomBar {
-      display: none !important;
-    }
-    
-    .drag-bar {
-      position: fixed;
-      height: 100%;
-      width: 8px;
-      top: 0;
-      bottom: 0;
-    }
+.readerBottomBar {
+  display: none !important;
+}
 
-    .right-bar {
-      cursor: col-resize;
-      left: 50%;
-      transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
-      background: linear-gradient(0.25turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
-      opacity: 0;
-    }
+.drag-bar {
+  position: fixed;
+  height: 100%;
+  width: 8px;
+  top: 0;
+  bottom: 0;
+}
 
-    .right-bar.active {
-      opacity: 1;
-    }
+.right-bar {
+  cursor: col-resize;
+  left: 50%;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  background: linear-gradient(0.25turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+  opacity: 0;
+}
 
-    .left-bar {
-      right: 50%;
-      transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
-      background: linear-gradient(0.75turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
-      opacity: 0;
-    }
+.right-bar.active {
+  opacity: 1;
+}
 
-    .left-bar.active {
-      opacity: 1;
-    }
+.left-bar {
+  right: 50%;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  background: linear-gradient(0.75turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+  opacity: 0;
+}
 
-    .darg-indicator {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-      background: linear-gradient(0.25turn, transparent, #295BE9 20%, #295BE9 80%, transparent);
-      height: 2px;
-      transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
-      opacity: 0;
-      display: none;
-    }
+.left-bar.active {
+  opacity: 1;
+}
 
-    .darg-indicator.active {
-      opacity: 1;
-      display: block;
-    }
+.darg-indicator {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: linear-gradient(0.25turn, transparent, #295BE9 20%, #295BE9 80%, transparent);
+  height: 2px;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+  display: none;
+}
 
-    .ind-num {
-      font-size: 30px;
-      color: #295BE9;
-      position: fixed;
-      left: 0;
-      right: 0;
-      bottom: 50%;
-      width: 500px;
-      text-align: center;
-      margin: auto auto 0;
-      text-shadow: 5px 3px 6px #576b95;
-      background: linear-gradient(45deg, transparent,#fff 50%, #fff 50%, transparent);
-      margin-bottom: 2px;
-      z-index: 10;
-      opacity: 0;
-      display: none;
-    }
+.darg-indicator.active {
+  opacity: 1;
+  display: block;
+}
 
-    .ind-num.active {
-      opacity: 1;
-      display: block;
-    }
-  `;
+.ind-num {
+  font-size: 30px;
+  color: #295BE9;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 50%;
+  width: 500px;
+  text-align: center;
+  margin: auto auto 0;
+  text-shadow: 5px 3px 6px #576b95;
+  background: linear-gradient(45deg, transparent,#fff 50%, #fff 50%, transparent);
+  margin-bottom: 2px;
+  z-index: 10;
+  opacity: 0;
+  display: none;
+}
+
+.ind-num.active {
+  opacity: 1;
+  display: block;
+}
+
+.navBar_link.navBar_link_ChangeFont {
+  border: none;
+  cursor: pointer;
+}
+
+.navBar_font_menu {
+  position: relative;
+  display: inline-block;
+}
+
+.navBar-subMenu {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.navBar-subMenu button {
+  text-decoration: none;
+  display: block;
+}
+
+.navBar-subMenu button:hover {background-color: #ddd;}
+
+.show {display: block;}
+`;
 
-  const styleElement = document.createElement('style');
-  styleElement.innerHTML = css;
-  document.head.appendChild(styleElement);
-};
+// function applyCss() {
+  // const css = `
+  //   * {
+  //     font-family: "LXGW WenKai Screen", LXGWWenKai, TsangerJinKai05, sans-serif !important;
+  //   }
+    
+  //   .readerControls {
+  //     left: unset !important;
+  //     margin-left: unset !important;
+  //     right: 16px !important;
+  //     transition: opacity .3s ease-in-out;
+  //   }
+
+  //   div.app_content div.readerTopBar {
+  //     height: 32px;
+  //     left:0;
+  //     right:0;
+  //     width: unset;
+  //     max-width: unset;
+  //     transition: opacity .3s ease-in-out;
+  //   }
+
+  //   div.readerContent div.app_content {
+  //     max-width: ${getLS(contentWidthKey) || 1000}px !important; 
+  //   }
+
+  //   .wr_whiteTheme .readerContent div.app_content {
+  //     background-color: rgb(253,246,227) !important;
+  //   }
+
+  //   .readerBottomBar {
+  //     display: none !important;
+  //   }
+    
+  //   .drag-bar {
+  //     position: fixed;
+  //     height: 100%;
+  //     width: 8px;
+  //     top: 0;
+  //     bottom: 0;
+  //   }
+
+  //   .right-bar {
+  //     cursor: col-resize;
+  //     left: 50%;
+  //     transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  //     background: linear-gradient(0.25turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+  //     opacity: 0;
+  //   }
+
+  //   .right-bar.active {
+  //     opacity: 1;
+  //   }
+
+  //   .left-bar {
+  //     right: 50%;
+  //     transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  //     background: linear-gradient(0.75turn, #295BE9, #295BE9 20%, transparent 20%, transparent);
+  //     opacity: 0;
+  //   }
+
+  //   .left-bar.active {
+  //     opacity: 1;
+  //   }
+
+  //   .darg-indicator {
+  //     position: fixed;
+  //     top: 0;
+  //     bottom: 0;
+  //     left: 0;
+  //     right: 0;
+  //     margin: auto;
+  //     background: linear-gradient(0.25turn, transparent, #295BE9 20%, #295BE9 80%, transparent);
+  //     height: 2px;
+  //     transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+  //     opacity: 0;
+  //     display: none;
+  //   }
+
+  //   .darg-indicator.active {
+  //     opacity: 1;
+  //     display: block;
+  //   }
+
+  //   .ind-num {
+  //     font-size: 30px;
+  //     color: #295BE9;
+  //     position: fixed;
+  //     left: 0;
+  //     right: 0;
+  //     bottom: 50%;
+  //     width: 500px;
+  //     text-align: center;
+  //     margin: auto auto 0;
+  //     text-shadow: 5px 3px 6px #576b95;
+  //     background: linear-gradient(45deg, transparent,#fff 50%, #fff 50%, transparent);
+  //     margin-bottom: 2px;
+  //     z-index: 10;
+  //     opacity: 0;
+  //     display: none;
+  //   }
+
+  //   .ind-num.active {
+  //     opacity: 1;
+  //     display: block;
+  //   }
+  // `;
+
+//   const styleElement = document.createElement('style');
+//   styleElement.innerHTML = css;
+//   document.head.appendChild(styleElement);
+// };
 
 function saveLS(key, value) {
   try {
@@ -310,6 +442,103 @@ function titleHelper() {
   );
 }
 
+// 这里不修改原有的按钮，而是在前面添加按钮
+function modifyHeader() {
+  const linkUpload = document.getElementsByClassName('navBar_link navBar_link_Upload')
+  const navBarSpace = document.getElementsByClassName('navBar_placeholder_regular')
+  const navBarSeparator = document.createElement('span')
+  const headerParent = document.getElementsByClassName('navBar_inner')
+  // const navBarSeparator = document.getElementsByClassName('navBar_separator')[0]
+
+  navBarSeparator.className = 'navBar_separator'
+  // 在这两个元素之间插入别的按钮
+  function addButton() {
+    const HeaderUnit = document.createElement('div')
+    HeaderUnit.id = 'change_font_unit'
+    HeaderUnit.className = 'navBar_font_menu'
+
+    // 需要把选择的字体传递到函数外，修改整体的CSS？
+
+    const button_ChangeFont = document.createElement('button')
+    // <button class="navBar_link navBar_link_ChangeFont">传书到手机</button>
+    // <span class="navBar_separator"></span>
+    button_ChangeFont.innerText = '全局字体'
+    button_ChangeFont.className = 'navBar_link navBar_link_ChangeFont'
+    button_ChangeFont.onclick = showFunction()
+
+    
+    
+    // 下拉菜单
+    const HiddenList = document.createElement('div')
+    HiddenList.className = 'navBar-subMenu'
+
+    const fontName = ['思源宋体','霞鹜文楷','思源黑体']
+    const fontCount = fontName.length  // 和加入的字体个数相等
+    for (var i=0; i<fontCount; i++){
+      const HiddenContent = document.createElement('button')
+      HiddenContent.className = 'navBar-subMenu-content'
+      HiddenContent.innerText = fontName[i]
+      HiddenList.after(HiddenContent)
+    }
+
+    HeaderUnit.after(button_ChangeFont,navBarSeparator,HiddenList)
+    headerParent.insertBefore(HeaderUnit,linkUpload)
+
+    /* 当用户点击按钮时，
+    在隐藏和显示下拉内容之间切换 */
+    function showFunction() {
+      document.getElementsByClassName('navBar-subMenu').classList.toggle('show');
+    }
+
+    // 如果用户在下拉框外单击，则关闭下拉框
+    window.onclick = function(event) {
+      if (!event.target.matches('.navBar_link.navBar_link_ChangeFont')) {
+        var dropdowns = document.getElementsByClassName('navBar-subMenu');
+        var i;
+        for (i = 0; i < dropdowns.length; i++) {
+          var openDropdown = dropdowns[i];
+          if (openDropdown.classList.contains('show')) {
+            openDropdown.classList.remove('show');
+          }
+        }
+      }
+    }
+
+    
+    
+    
+    
+    
+    // <button class="navBar_link navBar_link_GithubCode">Github</button>
+    // <span class="navBar_separator"></span>
+    // <button class="navBar_link navBar_link_GithubIssue">Github</button>
+    // <span class="navBar_separator"></span>
+    return HeaderUnit
+  }
+  function createALink(name, url, beforeWhatNode) {
+    const HeaderUnit = document.createElement('div')
+    HeaderUnit.id('header_add_unit')
+
+    const item = document.createElement('a');
+    item.innerText = name;
+    item.target = '_blank';
+    item.className = 'navBar_link';
+    item.style.cursor = 'pointer';
+
+    item.addEventListener('click', () => {
+      window.__TAURI__.shell.open(url);
+    });
+  
+    HeaderUnit.after(item,navBarSeparator)
+    beforeWhatNode.insertBefore(HeaderUnit)
+    return HeaderUnit;
+  }
+  const FontButton = addButton()
+  const IssueLink = createALink('PC版问题反馈', 'https://github.com/zeyios/weread-pc/issues', FontButton)
+  const CodeLink = createALink('Github', 'https://github.com/zeyios/weread-pc', IssueLink)
+}
+
+
 function modifyHeader() {
   const sendBook = document.querySelector('.navBar_link.navBar_link_Upload');
   const linkPage = document.querySelector('.navBar_link.navBar_link_ink');
@@ -328,7 +557,7 @@ function modifyHeader() {
     return item;
   }
 
-
+  // 这里我还是想保留传书功能
   if (sendBook) {
     const githubLink = createALink('Github', 'https://github.com/zeyios/weread-pc');
     sendBook.replaceWith(githubLink);
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-Bold.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-Bold.otf
new file mode 100644
index 0000000..10c3523
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-Bold.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-ExtraLight.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-ExtraLight.otf
new file mode 100644
index 0000000..d1f485c
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-ExtraLight.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-Heavy.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-Heavy.otf
new file mode 100644
index 0000000..34f2489
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-Heavy.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-Light.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-Light.otf
new file mode 100644
index 0000000..dff82b1
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-Light.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-Medium.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-Medium.otf
new file mode 100644
index 0000000..9e10784
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-Medium.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-Regular.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-Regular.otf
new file mode 100644
index 0000000..8b4993b
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-Regular.otf differ
diff --git a/src-tauri/src/inject/fonts/SourceHanSerifSC-SemiBold.otf b/src-tauri/src/inject/fonts/SourceHanSerifSC-SemiBold.otf
new file mode 100644
index 0000000..f50fdeb
Binary files /dev/null and b/src-tauri/src/inject/fonts/SourceHanSerifSC-SemiBold.otf differ