Html 如何使任何无衬线标志符号“接触”容器div的左边框？

我在使用无衬线字体时遇到标题问题。在无衬线字体中，大多数图示符不接触包含div的左边框，字体越大，它就越明显。因此，标题似乎与以下常规文本不一致

下面是一个示例代码：

h1{ 字体系列：无衬线； 字体大小：72px； 字体重量：较轻； } .集装箱{ 左边框：1px实心； } F字形 T字形 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

---

使用CSS无法做到这一点，除非以一种不可避免地依赖于角色、字体系列、权重和样式的方式，通过实验调整位置。它还取决于字体大小，但这可以使用em单元处理。对于给定的示例，请特别注意，使用Arial，sans serif映射到依赖于系统的默认字体，以下操作可行，但对于“F”以外的其他字符和其他字体，需要不同的值：

h1{ 字体系列：Arial，无衬线； 字体大小：72px； 字体重量：较轻； } .集装箱{ 左边框：1px实心； } F字形 T字形 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

---

坦率地说，我不会费心的。一个选择是添加一些负文本缩进，但是，正如F和T字符之间的差异所显示的，这将取决于标题的文本。是的，似乎是这样。我正在构建一个wordpress主题，因此无法预先知道标题文本。我很困惑，我以前在网上没有注意到它；谢谢我希望有一些神奇的解决办法。可惜没有。