mirror of
https://github.com/imsyy/home.git
synced 2024-11-16 03:32:17 +08:00
字体压缩 & 速度优化
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
|
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/)
|
* [Bootstrap](https://getbootstrap.com/)
|
||||||
|
|
|
@ -7,6 +7,12 @@ GitHub:https://github.com/imsyy/home
|
||||||
|
|
||||||
@charset "utf-8";
|
@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-face {
|
||||||
font-family: "Pacifico-Regular";
|
font-family: "Pacifico-Regular";
|
||||||
src: url('../font/Pacifico-Regular.ttf') format('truetype');
|
src: url('../font/Pacifico-Regular.ttf') format('truetype');
|
||||||
|
@ -951,6 +957,12 @@ footer {
|
||||||
-ms-animation: fade 0.75s;
|
-ms-animation: fade 0.75s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lrc-show {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
/*弹窗样式*/
|
/*弹窗样式*/
|
||||||
.iziToast {
|
.iziToast {
|
||||||
backdrop-filter: blur(10px) !important;
|
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">
|
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
|
||||||
</script>
|
</script>
|
||||||
<!-- FontAwesome -->
|
<!-- 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 -->
|
<!-- Aplayer -->
|
||||||
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
|
<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" />
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
|
|
@ -48,10 +48,11 @@ window.addEventListener('load', function () {
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
|
|
||||||
//中文字体缓加载
|
//中文字体缓加载
|
||||||
//由于中文字体过大,可转移至对象储存或 CDN 加载
|
//先行加载简体中文子集,后续补全字集
|
||||||
|
//由于压缩过后的中文字体仍旧过大,可转移至对象储存或 CDN 加载
|
||||||
const font = new FontFace(
|
const font = new FontFace(
|
||||||
"MiSans",
|
"MiSans",
|
||||||
"url(" + "https://fastly.jsdelivr.net/gh/imsyy/file@1.0/font/MiSans-Regular.woff" + ")"
|
"url(" + "../font/MiSans-Regular.woff2" + ")"
|
||||||
);
|
);
|
||||||
document.fonts.add(font);
|
document.fonts.add(font);
|
||||||
|
|
||||||
|
|
|
@ -31,7 +31,7 @@ $.ajax({
|
||||||
|
|
||||||
/* 底栏歌词 */
|
/* 底栏歌词 */
|
||||||
setInterval(function () {
|
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);
|
}, 500);
|
||||||
|
|
||||||
/* 音乐通知及控制 */
|
/* 音乐通知及控制 */
|
||||||
|
|
Loading…
Reference in New Issue
Block a user