本文最后更新于 42 天前,其中的信息可能已经有所发展或是发生改变。
修改了字体,字体链接和css代码奉上。
字体链接:https://app.windfonts.com/fonts/hkhlssxt/embed
CSS代码(gemini优化的):
添加了CDN加速插件,现在还不知道有没有用。
LiteSpeed Cache – WordPress 插件 | WordPress.org China 简体中文
/* =========================================
1. 全局字体与排版设置
========================================= */
/* 全局统一字体设置 */
body, button, input, select, textarea,
.site-title, .site-title a,
.site-description,
.main-navigation, .main-navigation a, .main-navigation ul li a,
.entry-title, .entry-title a,
.page-title,
.widget-title, .widget, .widget a,
.footer, .footer a {
font-family: 'wenfeng-hkhlssxt', sans-serif !important;
}
/* 统一字体大小控制 (1.2rem) */
/* 合并了原本分散的 li, p, .form-control 等选择器 */
p, li,
.form-control,
.additional-content-after-post,
.custom-checkbox .custom-control-input~.custom-control-label {
font-size: 1.2rem;
}
/* 文章正文段落特调 (比通用字体稍大) */
.post-content p {
font-size: 1.25rem;
}
/* 文章标题大小 */
.post-title {
font-size: 30px;
}
/* 代码块强调色 */
code {
color: rgba(var(--themecolor-rgbstr));
}
/* =========================================
2. 颜色模式 (日间/夜间模式)
========================================= */
/* 加粗字体颜色 */
strong { color: #A7727D; }
html.darkmode strong { color: #FAAB78; }
/* 预览模式代码颜色 */
pre { color: #A7727D; }
html.darkmode pre { color: #FAAB78; }
/* 基础文字颜色 */
body { color: #364863; }
/* 引文 (Blockquote) 背景与颜色 */
blockquote {
background: rgba(var(--themecolor-rgbstr), 0.1) !important;
width: 100%;
}
:root {
--color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}
/* =========================================
3. 顶部横幅 (Banner) 特效
========================================= */
/* 流光文字动画定义 */
@keyframes ColdLight {
0% { background-position: 0%; }
100% { background-position: 200%; }
}
/* 横幅主标题 (合并了原本分散的样式) */
.banner-title {
font-size: 4em !important; /* 字体大小 */
position: absolute;
/* 流光背景设置 */
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 200%;
animation: ColdLight 3s linear infinite;
color: transparent !important;
-webkit-background-clip: text;
}
/* 标题背后的光晕效果 */
.banner-title::before {
content: '';
position: absolute;
top: 0; left: 50%; bottom: 0; right: 0;
transform: translatex(-50%);
max-width: 500px;
z-index: -100;
background: white;
filter: blur(30px);
opacity: 0.2;
}
.banner-title .banner-title-inner,
.banner-title .banner-subtitle {
position: relative;
background: inherit;
}
/* 横幅副标题 */
.banner-subtitle {
font-size: 30px;
}
/* =========================================
4. 侧边栏 (Leftbar) 与 底部设置
========================================= */
/* 菜单项悬停颜色 */
.leftbar-menu-item > a:hover,
.leftbar-menu-item.current > a {
background-color: #f9f9f980;
}
/* 站点概览分隔线 */
.site-state-item { border-left: 1px solid #aaa; }
.site-friend-links-title { border-top: 1px dotted #aaa; }
/* 工具栏样式 */
#leftbar_tab_tools ul li {
padding-top: 3px;
padding-bottom: 3px;
border-bottom: none;
}
html.darkmode #leftbar_tab_tools ul li {
border-bottom: none;
}
#leftbar_tab_tools {
font-size: 14px; /* 字体缩小 */
}
/* 搜索框透明 */
button#leftbar_search_container {
background-color: transparent;
}
/* 公告栏与页脚渐变背景 */
#leftbar_announcement,
#footer {
background: var(--themecolor-gradient) !important;
}
/* 层级与边距调整 */
#leftbar_part1 { z-index: 1; }
.tab-content { padding: 10px 0px 0px 0px !important; }
.site-author-links { padding: 0px 0px 0px 10px; }
#leftbar_catalog { margin-left: 0px; }
#leftbar_catalog .index-link { padding: 4px; }
/* 子菜单样式 */
.leftbar-menu-subitem { min-width: max-content; }
.leftbar-menu-subitem .leftbar-menu-item > a { padding: 0rem 1.5rem 0rem 1rem; }
/* =========================================
5. 顶部导航栏 (Navbar)
========================================= */
/* 导航链接 */
.navbar-nav .nav-link {
font-size: 1.2rem;
font-family: 'wenfeng-hkhlssxt', sans-serif; /* 注意:这里指定了特定字体 btfFont */
}
.navbar-nav .nav-item { margin-right: 0; }
.mr-lg-5, .mx-lg-5 { margin-right: 1rem !important; }
/* 移动端菜单图标 */
.navbar-toggler-icon { width: 1.5rem; height: 1.5rem; }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.9rem; padding-left: 1rem; }
/* 站点图标 (Brand) */
.navbar-brand {
font-family: 'wenfeng-hkhlssxt', serif;
font-size: 2.0rem;
margin-right: 2rem;
padding-bottom: 0.3rem;
font-weight: 500; /* 加粗 */
}
.navbar-brand img { height: 24px; }
/* =========================================
6. 内容组件与杂项
========================================= */
/* 说说标题 */
.shuoshuo-title { font-size: 25px; }
/* 分类卡片居中 */
#content > div.page-information-card-container > div > div { text-align: center; }
/* 下拉菜单调整 */
.dropdown-menu .dropdown-item > i { width: 10px; }
.dropdown-menu > a { color: var(--themecolor); }
.dropdown-menu { min-width: max-content; }
.dropdown-menu .dropdown-item { padding: .5rem 1.5rem 0.5rem 1rem; }
/* 图片样式 */
article figure { margin: 0; }
.fancybox-wrapper { margin: auto; }
/* 表格样式 */
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th {
padding: 8px 10px;
border: 1px solid;
}
.wp-block-table.aligncenter { margin: 10px auto; }
/* 浮动按钮 (回顶等) 放大 */
button#fabtn_back_to_top,
button#fabtn_go_to_comment,
button#fabtn_toggle_blog_settings_popup,
button#fabtn_toggle_sides,
button#fabtn_open_sidebar {
font-size: 1.2rem;
}
/* 隐藏 SEO 插件的线条阴影 */
*[style='position: relative; z-index: 99998;'] { display: none; }
/* =========================================
7. 滚动条隐藏 (全局)
========================================= */
html {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar {
display: none; width: 0; /* Chrome/Safari */
}
相关链接
css的源代码来自这个大佬:Argon主题博客美化 – Echo小窝