caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更换为 HarmonyOS Sans

Browse Source
This commit is contained in:
底层用户 2022-08-03 19:33:01 +08:00
parent d22c329264
commit 005b7cb886
5 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -10,10 +10,11 @@
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
### Demo
>由于 CDN 缓存原因，查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
- [無名の主页](https://www.imsyy.top)
- [無名の主页 - 备用线路](https://home.imsyy.top)
- [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
### 功能
@ -94,7 +95,7 @@
### 音乐
>本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单
>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://file.imsyy.top/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用
>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用
更改 `music.js` 的参数即可实现自定义歌单列表
@ -105,6 +106,16 @@ let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
```
### 字体
现采用 `HarmonyOS Sans` 开源字体，采用字体拆分，提升加载速度
>由于本站 `CDN` 已开启防盗链，**非本站域名不可访问**，请将字体引入链接更改为下方内容，否则 **自定义字体将失效**
>
>`https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css`
<details>
<summary>旧版方式</summary>
>由于本项目引入了中文字体，需要压缩中文字体以提高网页加载速度（ 也可以取消使用中文字体 ）
#### 中文字体去除繁体
@ -135,6 +146,8 @@ make clean all
>详细信息可前往 [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) 查看原文
</details>
### 插件
* [Bootstrap](https://getbootstrap.com/)

17
README_EN.md
View File

@ -10,10 +10,11 @@ Simple little homepage, had enough of the original one and made a new one
>The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.imsyy.top/font/Pacifico-Regular.ttf)
### Demo
>Due to CDN caching, you may need `Ctrl` + `F5` to force a browser cache refresh to see the latest results
- [無名の主页](https://www.imsyy.top)
- [無名の主页 - 备用线路](https://home.imsyy.top)
- [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
### Functions
@ -95,7 +96,7 @@ This project uses `json` file to configure the site content, the configuration i
### Music
>This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization
>*Only supported in **Mainland China**, please replace `music.js` with [the following](https://file.imsyy.top/js/music/music-other.js) in other regions to enable the music player to work properly
>*Only supported in **Mainland China**, please replace `music.js` with [the following](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) in other regions to enable the music player to work properly
Change the parameters of `music.js` to achieve a custom song list
@ -106,6 +107,16 @@ let id = "7452421335"; //album ID; song ID; playlist ID;
```
### Fonts
Now using `HarmonyOS Sans` open source font, using font splitting to improve loading speed
>Because this site's `CDN` has opened anti-leech, **non-site domain name is not accessible**, please change the font import link to the following content, otherwise **custom fonts will be invalid**
>
>`https://cdn.jsdelivr.net/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css`
<details>
<summary>old way</summary>
>As Chinese fonts are introduced in this project, Chinese fonts need to be compressed to improve the loading speed of the page (you can also cancel the use of Chinese fonts)
#### Chinese font removal traditional
@ -136,6 +147,8 @@ make clean all
>For more information, please go to [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) to view the original article
</details>
### Plugins
* [Bootstrap](https://getbootstrap.com/)

8
css/style.css
View File

@ -7,14 +7,13 @@ GitHub：https://github.com/imsyy/home
@charset "utf-8";
@font-face {
/* @font-face {
font-family: "MiSans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../font/MiSans-Regular.subset.woff2') format('woff2');
/* src: url('../font/MiSans-Regular.subset.ttf') format('truetype'); */
}
} */
@font-face {
font-family: "Pacifico-Regular";
@ -35,6 +34,7 @@ body {
padding: 0;
background-color: #333;
overflow: hidden;
font-family: 'HarmonyOS_Regular', sans-serif;
}
*,
@ -44,7 +44,6 @@ p {
transition: 0.3s;
color: #efefef;
user-select: none;
font-family: 'MiSans', sans-serif;
cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important;
}
@ -858,6 +857,7 @@ input[type="radio"]:checked+label {
width: 100%;
border-radius: 6px !important;
margin-right: 18px;
font-family: 'HarmonyOS_Regular', sans-serif !important;
}
.aplayer.aplayer-withlrc .aplayer-pic {

8
index.html
View File

@ -18,10 +18,10 @@
<title>無名の主页</title>
<!-- jQuery -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
<!-- Google Fonts -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.geekzu.org/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet"> -->
<!-- HarmonyOS Sans -->
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
<link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css"
href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">

12
js/main.js
View File

@ -70,14 +70,14 @@ window.addEventListener('load', function () {
element.src = "./js/music.js";
document.body.appendChild(element);
//中文字体缓加载-此处写入字体源文件
//中文字体缓加载-此处写入字体源文件 （暂时弃用）
//先行加载简体中文子集，后续补全字集
//由于压缩过后的中文字体仍旧过大，可转移至对象存储或 CDN 加载
const font = new FontFace(
"MiSans",
"url(" + "./font/MiSans-Regular.woff2" + ")"
);
document.fonts.add(font);
// const font = new FontFace(
// "MiSans",
// "url(" + "./font/MiSans-Regular.woff2" + ")"
// );
// document.fonts.add(font);
}, false)