Safari浏览器统一字体之自定义CSS样式表

/* 设置根元素的字体和代码字体变量 */
:root {
    --font-family: -apple-system; /* 使用系统默认的字体 */
    --code-font-family: ui-monospace; /* 设置代码字体为系统默认的等宽字体 */
    -webkit-font-smoothing: antialiased !important; /* 在Webkit浏览器中启用字体抗锯齿 */
}

/* 为HTML元素设置字体和文本渲染优化 */
:where(html) {
    font-family: var(--font-family) !important; /* 使用根元素中定义的字体变量 */
    letter-spacing: -.0245rem; /* 字母间距微调 */
    text-rendering: optimizeLegibility; /* 优化文本可读性 */
}

/* 为段落和标题元素设置单词换行 */
:where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word; /* 长单词或URL在必要的时候可以换行 */
}

/* 为常见的文本和列表元素设置字体 */
:where(body, p, h1, h2, h3, h4, h5, h6, ol, ul, blockquote, q, u, cite, strong, dfn, abbr, acronym, address, small, select, textarea, th, td, dd, dt, font, label, input) {
    font-family: var(--font-family) !important; /* 使用根元素中定义的字体变量 */
}

/* 为代码相关的元素设置代码字体和字体大小 */
:where(code, kbd, pre, samp, var, tt, time) {
    font-family: var(--code-font-family) !important; /* 使用代码字体变量 */
    font-size: 1em; /* 代码字体大小设置为1em */
}

/* 排除伪元素和特定类名的元素，为其他元素设置字体 */
:not(::before, ::after):not(.svg, .iconfont, .far, .fat, .fab, .fas, .fa-gear, .fa) {
    font-family: var(--font-family),inherit !important; /* 使用根元素中定义的字体变量，或者继承父元素的字体 */
}

/* 为链接、加粗、强调、列表项等元素设置字体 */
:where(a, b, em, li, div, div > span, td > span, p > span, img + span):not([class*="font"], [class*="ico"], [class*="Ico"]) {
    font-family: var(--font-family),inherit !important; /* 使用根元素中定义的字体变量，或者继承父元素的字体 */
}