html - Safari 中的垂直直立文本空间很小

Question

使用writing-mode: vertical-lrwith 时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 上，它看起来像这样：

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

标签： htmlcsssafari

Answer 1

你可以试试这个，而不是使用text-orientation: upright;try 只是使用旋转文本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>