You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ol列表::marker伪元素无法正确应用font-family,如何解决?

问题:ol列表::marker伪元素font-family不生效

将Figma设计文件转换为HTML&CSS后,遇到一个问题:ol列表的::marker伪元素无法正确应用指定的font-family。在浏览器审查模式中查看时,该元素的font-family属性显示正确,但实际渲染效果不符合预期。

正确的ol列表样式参考:[参考样式图]

我原本使用的CSS代码如下:

.section-instructions ol li::marker {
  color: var(--brandy-red, #854632);
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: 700;
  line-height: inherit;
}

已解决

经提示,添加以下CSS声明后问题解决:

font: normal 700 1rem/1.5 "Outfit", "Arial", sans-serif;

原因是::marker伪元素仅支持font简写属性,不支持font-family等font属性的长写法。相关详情可参考MDN文档。

注:最初提问时描述的是ol列表样式问题,但实际使用了::marker伪元素进行样式设置,标题表述并无偏差。

内容的提问来源于stack exchange,提问作者Alper.d

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 17:50:22