html - , , 在 Safari 浏览器中的替代品

Question

 ,  ,  在 Safari 浏览器中损坏。

这些是在其他浏览器中工作的精简空间、n 大小空间、m 大小空间。

thinsp : a⟩b c d e f g

ensp : a b c d e f g

emsp : a b c d e f g

在 Safari 中有替代品吗？

Answer 1

这可能是字体问题；为所用的固定宽度空间指定包含字形的字体可能会有所帮助。大多数字体都缺少它们。好的浏览器不需要字形，而是增加其他字符之间的间距。

然而，更稳健的方法是使用 CSS 技术来添加间距，主要是 padding 属性，对于所有字母之间需要特定间距的文本运行，letter-间距属性。使用后者，请注意它也在最后一个字符之后添加了间距。我在 Unicode spaces 上的页面显示定义的或典型的“固定宽度空间”的宽度，如 THIN SPACE(并非都是真正的固定宽度)。但最好从所需间距的数量开始，以 em 单位(字体大小)为单位，而忘记固定宽度的空格。

另一种可能性是使用普通的 SPACE 字符，但将其包装在 span 中并设置其宽度。这需要使它成为一个内联 block 。当所需的非 CSS 回退是规则空间而不是缺少任何间距时，该方法优于上述方法。请注意，应该假定搜索引擎对 CSS 一无所知，因此这种方法与让它们“看到”字符之间的单词空间相关(例如，当你想要一个固定宽度的空间时，看到“foo bar”而不是“foo bar”)词“foo”和“bar”)。和往常一样，您可以使用 NO-BREAK SPACE 而不是 SPACE 来防止换行。

例子:

.thin {
  display: inline-block;
  width: 0.2em;
}

<div style="font-size: 200%">
<div>a b (normal space)</div>
<div>a&thinsp;b (thin space)</div>
<div><span style="padding-right: 0.2em">a</span>b (0.2em padding)</div>
<div><span style="letter-spacing: 0.2em">ab</span> (0.2em letter spacing)</div>
<div>a<span class=thin> </span>b (space set to 0.2em width)</div>
<div>a<span class=thin>&nbsp;</span>b (no-break space set to 0.2em width)</div>
</div>