html - 我可以在字体列表中使用 CSS 变量并让它在旧版浏览器中工作吗?
问题描述
我想使用 CSS 变量来存储字体,以防用户没有安装指定的字体。
例子:
:root {
--common-font: Comic Sans MS;
}
.header1 {
font-family: CoolFont1, var(--common-font);
}
如果我在字体名称中添加对变量的引用,旧版浏览器会中断吗?
解决方案
是的,它会中断,您必须在不使用 CSS 变量的情况下为旧版浏览器使用后备字体。
例如:
.header {
font-family: sans-serif; /* This is fallback font for old browsers */
font-family: var(--common-font);
}
您还可以将@supports 条件与虚拟功能查询一起使用:
.header {
@supports ( (--a: 0)) {
/* supported */
font-family: var(--common-font);
}
@supports ( not (--a: 0)) {
/* not supported */
font-family: sans-serif; /* This is fallback font for old browsers */
}
}
推荐阅读
- amazon-web-services - S3 存储桶策略 IAM 角色显示为 API 密钥
- typescript - 想要连续运行 Google Cloud SQL 迁移
- html - 如何使用 puppeteer 点击标签
- arrays - 如何在反应中将对象值数组更改为对象值数组对象
- angular - 如何让图像在 Angular 的 jspdf 自动表中工作
- encoding - 如何更改 Moba TextEditor 的默认编码和解码类型?
- swift - 我在我的 URLSession 中添加了一个 cookie,但我的 URLRequest 中缺少它
- faust - 浮士德应用程序在翻滚窗口中看到消息
- django - 是否可以在同一个项目中使用常规 Django+templates 和 Django restframework+a javascript 框架?
- java - 如何断言数据表中列中的所有文本值并说明具有多页数据的表?