这段CSS的主要目的是针对Safari浏览器自定义的样式表,实现了99%以上全局样式尤其字体的统一设定,同时优化了文字排版与显示效果。对于图标字体,则保持原有样式不变。现有一个解决不了的问题是div包含的文本与图标无法区分与排除。
代码语言:css复制@charset "UTF-8"; /* 设置字符编码为UTF-8 */
:root {
--font-family: -apple-system; /* 定义一个根变量,用于存储默认字体 */
--code-font-family: ui-monospace; /* 定义一个根变量,用于存储代码字体 */
text-rendering: optimizeLegibility; /* 优化文本渲染,提高可读性 */
-webkit-font-smoothing: antialiased !important; /* 在Webkit浏览器中启用抗锯齿字体渲染 */
}
html {
font-family: var(--font-family) !important; /* 设置HTML元素的字体为根变量定义的默认字体 */
font-feature-settings: "tnum" on; /* 启用数字特性,用于数字排版 */
font-size: 16px; /* 设置基础字体大小为16像素 */
letter-spacing: -.0355rem !important; /* 设置字母间距 */
}
/* 将默认字体应用到所有常见的文本元素 */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, q, cite, strong, b, dfn, abbr, acronym, address, small, label, select, textarea, th, td, font {
font-family: var(--font-family) !important;
}
/* 将代码字体应用到所有代码相关的元素 */
code, kbd, pre, samp, var, tt, time {
font-family: var(--code-font-family) !important;
font-size: 1em !important; /* 设置代码字体大小为1em */
}
/* 将默认字体应用到没有特定字体类的div元素 */
:is(div):not([class*="ico"]):not([class*="font"]) {
font-family: var(--font-family), inherit !important;
}
/* 将默认字体应用到span元素中的文本,但不包括有特定字体类的span */
:is(p > span, div > span, span > a):not([class*="ico"]):not([class*="font"]) {
font-family: var(--font-family) !important;
}
/* 将默认字体应用到链接和强调文本,但不包括有特定字体类的元素 */
:is(a, em, input):not([class*="ico"]) {
font-family: var(--font-family) !important;
}