Firefox和IE中的ttf等宽字体nbsp间距问题
提问于 2015-05-26 16:51:23
在Chrome上，一切运行正常。在火狐和IE上(IE是一个.eot文件，从.ttf转换而来)，我对和有字符宽度问题。
使用预定义的等宽字体，以适当的宽度显示。但如果我使用Ubuntu Mono或我自己的等宽truetype字体，空格字符太窄，并且文本不能垂直对齐换行。它就像是在为空格字符使用另一种字体。
如果我将实际的字形放入空格字符(32 0x20)，则间距是正确的。但是，一旦我删除了字形并再次将空格字符设为空，它就会恢复为错误的空格。下面的示例使用从Google字体加载的Ubuntu Mono，以便其他人使用。例如，字母"t“应该垂直对齐。第二个例子使用了内置的等宽字体，看起来不错。
HTML示例#1：
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
</head>
<body>
<h1 style="font-family: 'Ubuntu Mono'; font-size: 200%;">
>In ___
<br> One <+ +>
<br> eaR >> ^ << Out
<br> [=] the
<br> ~ OtheR</h1>
</body>
</html>HTML示例#2：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="font-family: monospace; font-size: 200%;">
>In ___
<br> One <+ +>
<br> eaR >> ^ << Out
<br> [=] the
<br> ~ OtheR</h1>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2015-06-16 22:28:28
HTML <pre>元素解决了我的问题。预格式化的文本，它需要等宽字体，并且空格以正确的宽度呈现。很奇怪，但却是真的。至少我找到了一个解决方案。我只是简单地将所有这些文本放在<pre>中，而不是<h1>中。唯一需要更改的是前导空格，因为<pre>不会忽略它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30464501
复制相关文章
点击加载更多
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
