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

时间:2011-12-02 19:08:53

标签: css html5 fonts letter-spacing

我知道尝试固定显示通常是网页设计禁止,但请听我说!

我正在为我运行的论坛开发类似白板的内容。长话短说,这个想法是用户可以像正常一样用文本和bbcode键入他们的帖子,然后在他们的文本上安装托管画布,用鼠标涂上它,点击提交,然后涂鸦将出现在他们的帖子之上。服务器将图像处理为透明背景png,然后将其正确对齐到文本中。

所以我实际上有后端处理和前端界面都能很好地协同工作。剩下要做的唯一部分是显示,其中处理过的涂鸦在文本顶部对齐。并且,为了使其工作,文本上的图像对齐需要非常精确。如果用户,例如,圈出或跨越一个单词,并且文本没有以相同的方式呈现给另一个用户,那么最终结果将是错误的。所以,我认为我需要锁定文本显示。这有点烦人,因为现在一切都很流畅,但是,嘿,这将是一个非常酷的功能,对吧?所以,我已经修改了后显示框的宽度,但是我对如何处理字体感到困惑 - 如何设置大小,面,字母间距,行间距等等所以显示是尽可能固定不同计算机上不同监视器上的不同用户。

有没有人有任何想法?如果它有帮助,我完全不关心IE或移动显示......

1 个答案:

答案 0 :(得分:0)

Kerning将是你最大的问题,但通过查看fontsquirrel上font-face可用的等宽字体应该很容易,这样就应该这样做

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

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

你可以使用letter-spacing:,line-height:和font-size:css类来获得更好的控制

希望这有所帮助。