Safari 中的垂直文本有很小的空格

Question

将

writing-mode: vertical-lr

与

text-orientation: upright

一起使用时，所有字符的高度大致相同。然而，在 Safari 上，单词之间的空格字符变得非常小。这是用于演示的代码片段：

@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
span {
  font-family: Asap, sans-serif;
  text-orientation: upright;
  writing-mode: vertical-lr;
  -webkit-text-orientation: upright;
}

<span>Hello, World!</span>

在 Chrome 和 Firefox 上，它看起来像这样：

然而，在 Safari 上，它看起来像这样：

在所有支持多种字体和字体大小的浏览器上使空格字符大小相同的最佳方法是什么？

Answer 1

您可以尝试此操作，而不是使用

text-orientation: upright;

尝试仅使用

transform: rotate(90deg);

旋转文本

span {
  font-family: Asap, sans-serif;
  transform: rotate(90deg);
}

然后针对特定浏览器：

span {
  font-family: Asap, sans-serif;
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

这是片段中的示例 -

span {
  transform: rotate(90deg);
    display: block;
    position: fixed;
    text-transform: uppercase;
}

<span>Hello, World!</span>

Answer 2

编辑：我提交了此错误报告，希望将来能够修复它。

我最近遇到了这个问题，但在网上找不到任何相关信息。

但我发现了一种 hacky 解决方案，它似乎可以在所有主要浏览器中呈现相等的间距（在 Chrome、Firefox 和 Safari 中进行了测试）。我知道我要提供的解决方案并不理想，但目前这是解决问题的唯一方法。

解决方案是在垂直直立文本元素中添加带有空格字符的

<span>

元素，例如

 

（不间断空格字符）。将这些添加的

<span>

元素的高度设置为适合您的设计和字体的固定值。请注意，您需要将

display

属性设置为

inline-block

才能使高度发挥作用。

查看此 CodePen 以及提供的解决方案