javascript - 像素精确的文本对齐

Question

我正在使用 JavaScript 扩大左对齐文本的范围，直到它填满其容器，或者直到它达到高度或宽度的可变阈值。此过程会导致font-size 差异很大。

我的问题是，对于某些字符，左侧有少量填充……虽然通常不会引起注意，但对于非常大的字体，它可以达到 10 像素或更多。

我制作了一个页面来演示对各种 Angular 色的影响: http://jsfiddle.net/kBu7S/

文本跨度存在于页面下方的所有其他元素都与左边缘逐像素对齐的设计中，因此较大的文本尺寸在视觉上会分散注意力。

谁能想出一种方法来计算填充量，以便我可以凸起跨度的相对位置？或者甚至有 CSS 解决方案？ (letter-spacing 和 word-spacing 没有效果。)

我承认，即使是肮脏的解决方案似乎也不太可能……不过还是感谢您的考虑。

Answer 1

内边距通常被称为字体的“肩部”，它是字体设计所固有的。没有简单的方法来抵消它，因为它是出于光学原因，为字体提供正确的间距。毕竟，如果您键入 IIIIIII，您需要在大写字母 I 之间留出一些间距，而这仅来自于此填充。其他字符，如 WWWWWW，则不需要。

你最好的办法是用你的字体做一个实验，测量每个字符的实际填充，然后构建一个表将字符映射到它们的填充。然后你可以调整 Angular 色的位置。这是很多工作，但我不知道您还能做些什么。