需要有关为html5批注画布应用程序制作固定间距字体的建议

Question

我知道尝试固定显示通常是网页设计的禁忌，但请听我说完！

我正在为我运行的论坛开发一个类似于白板的插件。长话短说，这个想法是用户可以像正常一样输入他们的帖子和bbcode，然后在他们的文本上创建一个托管画布，用鼠标在上面涂鸦，点击提交，然后涂鸦就会显示在他们的帖子上。服务器将图像处理成透明背景的png，然后将其与文本正确对齐。

所以我实际上让后端处理和前端接口都能很好地协同工作。剩下的唯一要做的部分是显示，其中处理后的涂鸦在文本顶部对齐。而且，要实现这一点，文本上的图像对齐需要相当精确。比方说，如果用户圈出或划掉一个单词，而另一个用户的文本呈现方式不同，那么最终结果将是错误的。所以，我想我需要锁定文本显示。这有点烦人，因为现在一切都很不稳定，但嘿，这将是一个很酷的功能，对吧？所以，我已经固定了后显示框的宽度，但我对于如何处理字体感到困惑-如何设置大小、字体、字母间距、行间距等，以便在不同计算机上的不同显示器上显示尽可能固定的不同用户。

有谁有什么想法吗？如果有帮助的话，我一点也不关心IE或移动显示……

Answer 1

字距调整将是您最大的问题，但通过查看fontsquirrel上的font-face可用的等宽字体，应该很容易，下面这样的代码应该可以解决这个问题

http://www.fontsquirrel.com/fonts/CPMono_v07

等宽字体应具有相等的字母间距。

可以使用letter-spacing：、line-height:和font-size: css类进行更精细的控制

希望这能帮上忙。