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

2024-10-13 09:26:08 浏览数 (11)

这段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;
}

2 人点赞