记录四——字体,插件
本文最后更新于 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小窝

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇