更换为 HarmonyOS Sans

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

View File

@ -10,10 +10,11 @@
>主页的 Logo 字体已经过压缩,若用本站 Logo 以外的字母会变回默认字体,这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf) >主页的 Logo 字体已经过压缩,若用本站 Logo 以外的字母会变回默认字体,这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
### Demo ### Demo
>由于 CDN 缓存原因,查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存 >由于 CDN 缓存原因,查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
- [無名の主页](https://www.imsyy.top) - [無名の主页](https://www.imsyy.top)
- [無名の主页 - 备用线路](https://home.imsyy.top) - [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
### 功能 ### 功能
@ -94,7 +95,7 @@
### 音乐 ### 音乐
>本项目采用了基于 `MetingJS``Aplayer` 音乐播放器,可实现快速自定义歌单 >本项目采用了基于 `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` 的参数即可实现自定义歌单列表 更改 `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/) 查看原文 >详细信息可前往 [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) 查看原文
</details>
### 插件 ### 插件
* [Bootstrap](https://getbootstrap.com/) * [Bootstrap](https://getbootstrap.com/)

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) >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 ### Demo
>Due to CDN caching, you may need `Ctrl` + `F5` to force a browser cache refresh to see the latest results >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://www.imsyy.top)
- [無名の主页 - 备用线路](https://home.imsyy.top) - [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
### Functions ### Functions
@ -95,7 +96,7 @@ This project uses `json` file to configure the site content, the configuration i
### Music ### Music
>This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization >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 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 ### 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) >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 #### 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 >For more information, please go to [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) to view the original article
</details>
### Plugins ### Plugins
* [Bootstrap](https://getbootstrap.com/) * [Bootstrap](https://getbootstrap.com/)

View File

@ -7,14 +7,13 @@ GitHubhttps://github.com/imsyy/home
@charset "utf-8"; @charset "utf-8";
@font-face { /* @font-face {
font-family: "MiSans"; font-family: "MiSans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url('../font/MiSans-Regular.subset.woff2') format('woff2'); 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";
@ -35,6 +34,7 @@ body {
padding: 0; padding: 0;
background-color: #333; background-color: #333;
overflow: hidden; overflow: hidden;
font-family: 'HarmonyOS_Regular', sans-serif;
} }
*, *,
@ -44,7 +44,6 @@ p {
transition: 0.3s; transition: 0.3s;
color: #efefef; color: #efefef;
user-select: none; 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; 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%; width: 100%;
border-radius: 6px !important; border-radius: 6px !important;
margin-right: 18px; margin-right: 18px;
font-family: 'HarmonyOS_Regular', sans-serif !important;
} }
.aplayer.aplayer-withlrc .aplayer-pic { .aplayer.aplayer-withlrc .aplayer-pic {

View File

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

View File

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