72 lines
2.1 KiB
CSS
72 lines
2.1 KiB
CSS
|
/* 字体备用系统 - 确保在任何情况下都有合适的字体显示 */
|
||
|
|
|
||
|
|
/* 全局字体备用栈 */
|
||
|
|
:root {
|
||
|
|
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
|
|
--font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
||
|
|
--font-family-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
|
|
--font-family-chinese: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 当 Open Sans 不可用时的备用 */
|
||
|
|
body, .open-sans-fallback {
|
||
|
|
font-family: "Open Sans", var(--font-family-sans);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 当 Noto Serif SC 不可用时的备用 */
|
||
|
|
.noto-serif-fallback {
|
||
|
|
font-family: "Noto Serif SC", var(--font-family-chinese), var(--font-family-serif);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 通用中文字体备用 */
|
||
|
|
.chinese-text {
|
||
|
|
font-family: var(--font-family-chinese);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 确保代码字体始终可用 */
|
||
|
|
code, pre, .monospace {
|
||
|
|
font-family: var(--font-family-mono);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 字体加载失败时的样式调整 */
|
||
|
|
.font-loading-error {
|
||
|
|
font-family: var(--font-family-sans) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-loading-error::before {
|
||
|
|
content: "";
|
||
|
|
display: inline-block;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 响应式字体大小 */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
body {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 769px) {
|
||
|
|
body {
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 确保图标字体备用 */
|
||
|
|
.fa, .fas, .far, .fal, .fab {
|
||
|
|
font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 当图标字体不可用时显示文字 */
|
||
|
|
.fa-home::after { content: "首页"; }
|
||
|
|
.fa-user::after { content: "用户"; }
|
||
|
|
.fa-search::after { content: "搜索"; }
|
||
|
|
.fa-menu::after { content: "菜单"; }
|
||
|
|
.fa-close::after { content: "关闭"; }
|
||
|
|
.fa-arrow-left::after { content: "←"; }
|
||
|
|
.fa-arrow-right::after { content: "→"; }
|
||
|
|
.fa-arrow-up::after { content: "↑"; }
|
||
|
|
.fa-arrow-down::after { content: "↓"; }
|