CSS initial-letter属性，嗯……也就这样吧
💡
原文中文，约2200字，阅读约需6分钟。
📝
内容提要
Chrome 110开始支持CSS initial-letter属性，用于设置首字母占据多少行文本的高度。但在中文场景下不实用。
🎯
关键要点
- Chrome 110开始支持CSS initial-letter属性，用于设置首字母占据多少行文本的高度。
- initial-letter属性解决了首字母放大时的多行排版问题，替代了::first-letter伪元素和font-size属性。
- initial-letter属性的语法支持1~2个数值，必须大于0。
- 该属性目前在Chrome和Safari浏览器中兼容，但Firefox尚不支持。
- 在中文场景下，首个文字放大展示不实用，且::first-letter伪元素无法匹配引号字符。
- initial-letter属性的应用范围有限，无法精确定位，使用::before伪元素和float环绕效果更佳。
- 总体来看，initial-letter属性在实际开发中应用场景较少，了解即可。
❓
延伸问答
CSS initial-letter属性的主要功能是什么？
CSS initial-letter属性用于设置首字母占据多少行文本的高度，解决多行排版问题。
initial-letter属性的语法是什么？
initial-letter属性支持1~2个数值，必须大于0，例如initial-letter: 2或initial-letter: 3 2。
哪些浏览器支持CSS initial-letter属性？
目前Chrome和Safari浏览器支持initial-letter属性，Firefox尚不支持。
在中文排版中，initial-letter属性的实用性如何？
在中文场景下，initial-letter属性不实用，放大首字母效果奇怪且无法匹配引号字符。
为什么说initial-letter属性的应用场景有限？
因为initial-letter属性只能用于::first-letter伪元素，且支持的CSS属性有限，无法精确定位。
如何替代initial-letter属性实现类似效果？
可以使用::before伪元素结合float环绕效果来实现类似的排版效果。
🏷️
标签
➡️
