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
相关产品推荐
相关产品推荐

