字体压缩 & 速度优化

README.md

@@ -41,6 +41,37 @@ var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
 var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
 ```
 
+### 字体
+>由于本项目引入了中文字体，需要压缩中文字体以提高网页加载速度（ 也可以取消使用中文字体 ）
+
+#### 中文字体去除繁体
+
+- 安装 `Python 3.7` 和 `pip`
+- 运行 `pip install fonttools`
+- 下载 [sc_unicode.txt](https://gist.githubusercontent.com/imaegoo/d64e5088b723c2e02c40985f55ff12db/raw/5ebd2ce49418c73459a9dfe050483409306a6c1d/sc_unicode.txt)
+- 运行 `pyftsubset 字体名称.ttf --unicodes-file=sc_unicode.txt`
+
+#### 字体进一步压缩
+
+- 编译安装 `Google woff2`
+
+```bash
+sudo apt-get install -y git g++ make
+git clone --recursive https://github.com/google/woff2.git
+cd woff2
+make clean all
+```
+
+- 再压缩字体
+
+```
+./woff2_compress ./字体名称.ttf
+```
+
+- 最终可对原字体进行缓加载，**先行加载压缩后的字体**
+
+>详细信息可前往 [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) 查看原文
+
 ### 插件
 
 * [Bootstrap](https://getbootstrap.com/)

css/style.css

@@ -7,6 +7,12 @@ GitHub：https://github.com/imsyy/home
 
 @charset "utf-8";
 
+@font-face {
+    font-family: "MiSans";
+    src: url('../font/MiSans-Regular.subset.woff2') format('woff2');
+    src: url('../font/MiSans-Regular.subset.ttf') format('truetype');
+}
+
 @font-face {
     font-family: "Pacifico-Regular";
     src: url('../font/Pacifico-Regular.ttf') format('truetype');
@@ -951,6 +957,12 @@ footer {
     -ms-animation: fade 0.75s;
 }
 
+.lrc-show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 /*弹窗样式*/
 .iziToast {
     backdrop-filter: blur(10px) !important;

index.html

@@ -36,7 +36,7 @@
         src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
     </script>
     <!-- FontAwesome -->
-    <link rel="stylesheet" href="https://lib.baomitu.com/font-awesome/6.1.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
     <!-- Aplayer -->
     <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
         crossorigin="anonymous" referrerpolicy="no-referrer" />

js/main.js

@@ -48,10 +48,11 @@ window.addEventListener('load', function () {
     document.body.appendChild(element);
 
     //中文字体缓加载
-    //由于中文字体过大，可转移至对象储存或 CDN 加载
+    //先行加载简体中文子集，后续补全字集
+    //由于压缩过后的中文字体仍旧过大，可转移至对象储存或 CDN 加载
     const font = new FontFace(
         "MiSans",
-        "url(" + "https://fastly.jsdelivr.net/gh/imsyy/file@1.0/font/MiSans-Regular.woff" + ")"
+        "url(" + "../font/MiSans-Regular.woff2" + ")"
     );
     document.fonts.add(font);
 

js/music.js

@@ -31,7 +31,7 @@ $.ajax({
 
         /* 底栏歌词 */
         setInterval(function () {
-            $("#lrc").html("<span class='lrc-show'>" + $(".aplayer-lrc-current").text() + "</span>");
+            $("#lrc").html("<span class='lrc-show'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg>&nbsp;" + $(".aplayer-lrc-current").text() + "&nbsp;<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg></span>");
         }, 500);
 
         /* 音乐通知及控制 */