Skip to content

Commit a1546db

Browse files
dffacedfface
committed
feat: font family
1 parent 459a2dd commit a1546db

11 files changed

Lines changed: 307 additions & 120 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ It now supports:
1515
* Dark mode.
1616
* Reading progress bar.
1717
* Table of contents in each chapter(not active in `Page turning mode`).
18-
* Font size adjustment.
18+
* Font size/family adjustment.
1919
* Image zoom.
2020
* Mobile devices: especially for Kindle, remember to click `Not Kindle` in the header of home page to enable `Kindle Mode` to optimize experience.
2121
* Code highlight(not active in `Kindle Mode`).

‎epub_browser/assets/book.css‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
}
3939

4040
body {
41-
font-family: "LXGW WenKai", "Helvetica Neue", "Heiti", "Songti", "Kaiti", "Fangsong", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Times New Roman", "Courier New", system-ui, -apple-system, sans-serif;
4241
line-height: 1.6;
4342
color: var(--text-color);
4443
background: var(--bg-color);
@@ -47,11 +46,6 @@ body {
4746
padding: 0 20px;
4847
}
4948

50-
/* 字体设置 */
51-
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content span, .content a, .content div {
52-
font-family: "LXGW WenKai", "Helvetica Neue", "Heiti", "Songti", "Kaiti", "Fangsong", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Times New Roman", "Courier New", system-ui, -apple-system, sans-serif;
53-
}
54-
5549
.container {
5650
max-width: 1000px;
5751
margin: 0 auto;
@@ -407,7 +401,7 @@ body {
407401
.book-info-cover img {
408402
width: 100%;
409403
height: 100%;
410-
object-fit: cover;
404+
object-fit: contain;
411405
}
412406

413407
.book-info-content {

‎epub_browser/assets/book.js‎

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,44 @@
1-
document.addEventListener('DOMContentLoaded', function() {
2-
const path = window.location.pathname; // 获取当前URL路径
3-
let pathParts = path.split('/');
4-
pathParts = pathParts.filter(item => item !== "");
5-
const book_hash = pathParts[pathParts.indexOf('book') + 1];
1+
// 设置 cookie
2+
function setCookie(key, value) {
3+
const date = new Date();
4+
date.setTime(date.getTime() + 3650 * 24 * 60 * 60 * 1000); // 3650天的毫秒数
5+
const expires = "expires=" + date.toUTCString(); // 转换为 UTC 格式
6+
document.cookie = `${key}=${value}; ${expires}; path=/;`;
7+
}
68

7-
// 设置 cookie
8-
function setCookie(key, value) {
9-
const date = new Date();
10-
date.setTime(date.getTime() + 3650 * 24 * 60 * 60 * 1000); // 3650天的毫秒数
11-
const expires = "expires=" + date.toUTCString(); // 转换为 UTC 格式
12-
document.cookie = `${key}=${value}; ${expires}; path=/;`;
13-
}
14-
15-
// 解析指定 key 的 Cookie
16-
function getCookie(key) {
17-
// 分割所有 Cookie 为数组
18-
const cookies = document.cookie.split('; ');
19-
for (const cookie of cookies) {
20-
// 分割键和值
21-
const [cookieKey, cookieValue] = cookie.split('=');
22-
// 解码并返回匹配的值
23-
if (cookieKey === key) {
24-
return decodeURIComponent(cookieValue);
25-
}
9+
// 解析指定 key 的 Cookie
10+
function getCookie(key) {
11+
// 分割所有 Cookie 为数组
12+
const cookies = document.cookie.split('; ');
13+
for (const cookie of cookies) {
14+
// 分割键和值
15+
const [cookieKey, cookieValue] = cookie.split('=');
16+
// 解码并返回匹配的值
17+
if (cookieKey === key) {
18+
return decodeURIComponent(cookieValue);
2619
}
27-
return null; // 未找到
2820
}
21+
return null; // 未找到
22+
}
23+
24+
function deleteCookie(name) {
25+
// 设置 Cookie 过期时间为过去（例如：1970年1月1日）
26+
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
27+
}
2928

30-
function deleteCookie(name) {
31-
// 设置 Cookie 过期时间为过去（例如：1970年1月1日）
32-
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
29+
function updateFontFamily(fontFamily, fontFamilyInput) {
30+
if (fontFamily == "custom") {
31+
document.body.style.fontFamily = fontFamilyInput;
32+
} else {
33+
document.body.style.fontFamily = fontFamily;
3334
}
35+
}
36+
37+
document.addEventListener('DOMContentLoaded', function() {
38+
const path = window.location.pathname; // 获取当前URL路径
39+
let pathParts = path.split('/');
40+
pathParts = pathParts.filter(item => item !== "");
41+
const book_hash = pathParts[pathParts.indexOf('book') + 1];
3442

3543
let kindleMode = getCookie("kindle-mode") || "false";
3644

@@ -81,14 +89,22 @@ document.addEventListener('DOMContentLoaded', function() {
8189
// 主题切换功能
8290
const themeToggle = document.getElementById('themeToggle');
8391
const themeIcon = themeToggle.querySelector('i');
92+
let fontFamily = "system-ui, -apple-system, sans-serif";
93+
let fontFamilyInput = null;
8494

8595
// 检查本地存储中的主题设置
8696
let currentTheme = 'light';
8797
if (!isKindleMode()) {
8898
currentTheme = localStorage.getItem('theme');
99+
fontFamily = localStorage.getItem('font_family') || "system-ui, -apple-system, sans-serif";
100+
fontFamilyInput = localStorage.getItem('font_family_input');
89101
} else {
90102
currentTheme = getCookie('theme');
103+
fontFamily = getCookie('font_family') || "system-ui, -apple-system, sans-serif";
104+
fontFamilyInput = getCookie('font_family_input');
91105
}
106+
107+
updateFontFamily(fontFamily, fontFamilyInput);
92108

93109
// 应用保存的主题
94110
if (currentTheme === 'dark') {

‎epub_browser/assets/chapter.css‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
}
4343

4444
body {
45-
font-family: "LXGW WenKai", "Helvetica Neue", "Heiti", "Songti", "Kaiti", "Fangsong", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Times New Roman", "Courier New", system-ui, -apple-system, sans-serif;
4645
line-height: 1.6;
4746
color: var(--text-color);
4847
background: var(--bg-color);
@@ -53,11 +52,6 @@ body {
5352
flex-direction: column;
5453
}
5554

56-
/* 字体设置 */
57-
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content span, .content a, .content div {
58-
font-family: "LXGW WenKai", "Helvetica Neue", "Heiti", "Songti", "Kaiti", "Fangsong", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Times New Roman", "Courier New", system-ui, -apple-system, sans-serif;
59-
}
60-
6155
.container {
6256
max-width: 1000px;
6357
width: 80%;
@@ -536,7 +530,7 @@ body {
536530
display: none;
537531
flex-direction: column;
538532
gap: 10px;
539-
width: 150px;
533+
width: 200px;
540534
z-index: 88;
541535
}
542536

@@ -547,7 +541,7 @@ body {
547541
.font-size-control {
548542
display: flex;
549543
align-items: center;
550-
justify-content: space-between;
544+
justify-content: space-around;
551545
}
552546

553547
.font-size-btn {
@@ -963,6 +957,51 @@ body {
963957
background: var(--bg-color);
964958
}
965959

960+
/* 字体家族选择器 */
961+
.font-family-selector select {
962+
width: 100%;
963+
padding: 10px 15px;
964+
border: 1px solid var(--border-color);
965+
border-radius: 6px;
966+
background: var(--bg-color);
967+
color: var(--text-color);
968+
font-size: 0.9rem;
969+
transition: var(--transition);
970+
}
971+
972+
.font-family-selector select:focus {
973+
outline: none;
974+
border-color: var(--primary);
975+
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
976+
}
977+
978+
.custom-font-input {
979+
display: flex;
980+
flex-direction: column;
981+
gap: 5px;
982+
}
983+
984+
.custom-font-input input {
985+
padding: 10px 15px;
986+
border: 1px solid var(--border-color);
987+
border-radius: 6px;
988+
background: var(--bg-color);
989+
color: var(--text-color);
990+
font-size: 0.9rem;
991+
transition: var(--transition);
992+
}
993+
994+
.custom-font-input input:focus {
995+
outline: none;
996+
border-color: var(--primary);
997+
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
998+
}
999+
1000+
.custom-font-input small {
1001+
color: var(--text-secondary);
1002+
font-size: 0.8rem;
1003+
}
1004+
9661005
/* 响应式设计 */
9671006
@media (max-width: 1079px) {
9681007
.container {

0 commit comments

Comments
 (0)