字体压缩 & 速度优化
This commit is contained in:
parent
80a41ec182
commit
9d7f369f61
31
README.md
31
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/)
|
||||
|
@ -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;
|
||||
|
BIN
font/MiSans-Regular.subset.ttf
Normal file
BIN
font/MiSans-Regular.subset.ttf
Normal file
Binary file not shown.
BIN
font/MiSans-Regular.subset.woff2
Normal file
BIN
font/MiSans-Regular.subset.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
font/MiSans-Regular.woff2
Normal file
BIN
font/MiSans-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
@ -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" />
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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> " + $(".aplayer-lrc-current").text() + " <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);
|
||||
|
||||
/* 音乐通知及控制 */
|
||||
|
Loading…
Reference in New Issue
Block a user